ReactJS thêm lớp động vào tên lớp thủ công

Tôi cần thêm một lớp động vào danh sách các lớp thông thường, nhưng không biết làm thế nào (tôi đang sử dụng babel), đại loại như thế này:

<div className="wrapper searchDiv {this.state.something}">
...
</div>

Có ý kiến ​​gì không?

Bạn có thể làm điều này, JavaScript bình thường:

className={'wrapper searchDiv ' + this.state.something}

hoặc phiên bản mẫu chuỗi, với backticks:

className={`wrapper searchDiv ${this.state.something}`}

Cả hai loại tất nhiên chỉ là JavaScript, nhưng mẫu đầu tiên là loại truyền thống.

Dù sao, trong JSX, mọi thứ được đặt trong dấu ngoặc nhọn đều được thực thi dưới dạng JavaScript, vì vậy về cơ bản bạn có thể làm bất cứ điều gì bạn muốn ở đó. Nhưng việc kết hợp các chuỗi JSX và dấu ngoặc nhọn là không có lợi cho các thuộc tính.

Tùy thuộc vào số lượng lớp động bạn cần thêm khi dự án của bạn phát triển, có thể đáng để kiểm tra tiện ích tên lớp của JedWatson trên GitHub. Nó cho phép bạn biểu diễn các lớp có điều kiện của bạn dưới dạng một đối tượng và trả về các lớp đánh giá là đúng.

Vì vậy, như một ví dụ từ tài liệu React của nó:

render () {

var btnClass = classNames({
  'btn': true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});

return <button className={btnClass}>I'm a button!</button>;

} 

Vì React kích hoạt kết xuất lại khi có thay đổi trạng thái, tên lớp động của bạn được xử lý tự nhiên và được cập nhật với trạng thái của thành phần.

Một cú pháp đơn giản có thể sẽ là:

<div className={`wrapper searchDiv ${this.state.something}`}>

Đây là tùy chọn tốt nhất cho tên lớp động, chỉ cần thực hiện một số phép nối giống như chúng ta làm trong Javascript.

     className={
        "badge " +
        (this.state.value ? "badge-primary " : "badge-danger ") +
        " m-4"
      }

Nếu bạn cần tên kiểu sẽ xuất hiện theo điều kiện trạng thái, tôi thích sử dụng cấu trúc này:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>

thử cái này bằng hook:

        const [dynamicClasses, setDynamicClasses] = React.useState([
    "dynamicClass1", "dynamicClass2
]);

và thêm cái này trong thuộc tính className:

<div className=`wrapper searchDiv ${[...dynamicClasses]}`>
...
</div>

để thêm lớp:

    const addClass = newClass => {
       setDynamicClasses([...dynamicClasses, newClass])
    }

để xóa lớp:

        const deleteClass= classToDelete => {

           setDynamicClasses(dynamicClasses.filter(class = > {
             class !== classToDelete
           }));

        }

Bạn có thể sử dụng gói npm này . Nó xử lý mọi thứ và có các tùy chọn cho các lớp tĩnh và động dựa trên một biến hoặc một hàm.

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames({class1: true, class2 : false})} />

getBadgeClasses() {
    let classes = "badge m-2 ";
    classes += (this.state.count === 0) ? "badge-warning" : "badge-primary";
    return classes;
}

<span className={this.getBadgeClasses()}>Total Count</span>

className={css(styles.mainDiv, 'subContainer')}

Giải pháp này đã được thử và thử nghiệm trong React SPFx.

Đồng thời thêm câu lệnh nhập:

import { css } from 'office-ui-fabric-react/lib/Utilities';