ReactJS เพิ่มคลาสแบบไดนามิกให้กับชื่อคลาสแบบแมนนวล

ฉันต้องการเพิ่มคลาสแบบไดนามิกในรายการคลาสปกติ แต่ไม่ทราบว่า (ฉันใช้ babel) ได้อย่างไรเช่นนี้:

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

ความคิดใด ๆ

คุณสามารถทำเช่นนี้ JavaScript ปกติ:

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

หรือเวอร์ชันเทมเพลตสตริงที่มี backticks:

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

แน่นอนว่าทั้งสองประเภทนี้มีเพียง JavaScript แต่รูปแบบแรกคือรูปแบบดั้งเดิม

อย่างไรก็ตามใน JSX สิ่งที่อยู่ในวงเล็บปีกกาจะถูกเรียกใช้เป็น JavaScript ดังนั้นโดยทั่วไปคุณสามารถทำสิ่งที่คุณต้องการได้ แต่การรวมสตริง JSX และวงเล็บปีกกาเป็นสิ่งที่ไม่ต้องทำสำหรับแอตทริบิวต์

ขึ้นอยู่กับจำนวนคลาสแบบไดนามิกที่คุณต้องเพิ่มเมื่อโครงการของคุณเติบโตมันอาจคุ้มค่าที่จะตรวจสอบยูทิลิตี้ชื่อคลาสโดย JedWatson บน GitHub อนุญาตให้คุณแสดงคลาสที่มีเงื่อนไขของคุณเป็นอ็อบเจกต์และส่งคืนคลาสที่มีค่าเป็นจริง

ดังนั้นเป็นตัวอย่างจากเอกสารของ React

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>;

} 

เนื่องจาก React ทริกเกอร์การแสดงผลซ้ำเมื่อมีการเปลี่ยนแปลงสถานะชื่อคลาสแบบไดนามิกของคุณจะได้รับการจัดการอย่างเป็นธรรมชาติและอัพเดตด้วยสถานะขององค์ประกอบของคุณ

ไวยากรณ์ที่เป็นไปได้ง่ายคือ:

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

นี่คือตัวเลือกที่ดีที่สุดสำหรับ className แบบไดนามิกเพียงแค่ทำการต่อกันอย่างที่เราทำใน Javascript

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

หากคุณต้องการชื่อสไตล์ซึ่งควรปรากฏตามสภาพของรัฐฉันชอบที่จะใช้โครงสร้างนี้:

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

ลองใช้ hooks:

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

และเพิ่มในแอตทริบิวต์ className:

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

เพื่อเพิ่มคลาส:

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

เพื่อลบคลาส:

        const deleteClass= classToDelete => {

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

        }

คุณสามารถใช้นี้แพคเกจ NPM มันจัดการทุกอย่างและมีตัวเลือกสำหรับการเรียนแบบคงที่และแบบไดนามิกขึ้นอยู่กับตัวแปรหรือฟังก์ชั่น

// 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')}

โซลูชันนี้ได้รับการลองและทดสอบใน React SPFx

เพิ่มคำสั่งการนำเข้าด้วย:

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