แอตทริบิวต์แบบไดนามิกใน ReactJS

ฉันต้องการรวม / ละเว้นแอตทริบิวต์ที่ปิดใช้งานในองค์ประกอบปุ่มแบบไดนามิก ฉันได้เห็นตัวอย่างของค่าแอตทริบิวต์ไดนามิกมากมาย แต่ไม่ใช่ของแอตทริบิวต์เอง ฉันมีฟังก์ชันการแสดงผลดังต่อไปนี้:

render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

ซึ่งทำให้เกิดข้อผิดพลาดในการแยกวิเคราะห์เนื่องจากอักขระ "{" ฉันจะรวม / ละเว้นแอตทริบิวต์ที่ปิดใช้งานตามผลลัพธ์ (บูลีน) ของ AppStore.cartIsEmpty () ได้อย่างไร

วิธีที่สะอาดที่สุดในการเพิ่มแอตทริบิวต์ทางเลือก (รวมถึงdisabledและอื่น ๆ ที่คุณอาจต้องการใช้) คือการใช้แอตทริบิวต์การแพร่กระจาย JSX :

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

ด้วยการใช้แอตทริบิวต์การแพร่กระจายคุณสามารถเพิ่ม (หรือแทนที่) แอตทริบิวต์ที่คุณต้องการได้แบบไดนามิกโดยใช้อินสแตนซ์วัตถุจาวาสคริปต์ ในตัวอย่างของฉันด้านบนโค้ดจะสร้างdisabledคีย์ (ที่มีdisabledค่าในกรณีนี้) เมื่อdisabledคุณสมบัติถูกส่งไปยังHelloอินสแตนซ์คอมโพเนนต์

ถ้าคุณเพียงต้องการที่จะใช้disabledแต่นี้คำตอบที่ทำงานได้ดี

คุณสามารถส่งผ่านบูลีนไปยังdisabledแอตทริบิวต์

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

ฉันใช้ React 16 และใช้ได้กับฉัน ( boolการทดสอบของคุณอยู่ที่ไหน):

<fieldset {...(bool ? {disabled:true} : {})}>

โดยทั่วไปจากการทดสอบ ( bool) คุณส่งคืนวัตถุที่มีแอตทริบิวต์หรือคุณส่งคืนวัตถุว่างเปล่า

นอกจากนี้หากคุณต้องการเพิ่มหรือละเว้นแอตทริบิวต์หลายรายการคุณสามารถทำได้:

<fieldset {...(bool ? {disabled:true} : {})} {...(bool ? {something:'123'} : {})}>

สำหรับแอตทริบิวต์ที่ซับซ้อนมากขึ้นที่มีการจัดการฉันขอแนะนำให้คุณกำหนดแท็บวัตถุที่มี (หรือไม่มี) แอตทริบิวต์ภายนอก JSX

วิธีที่สะอาดกว่าในการทำแอตทริบิวต์แบบไดนามิกซึ่งใช้ได้กับแอตทริบิวต์ใด ๆ คือ

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

โทรในองค์ประกอบการตอบสนองของคุณดังต่อไปนี้

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

เคล็ดลับ:

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

2. คุณสามารถส่งผ่านค่าnullเพื่อไม่ให้แสดงแอตทริบิวต์แบบไดนามิก

สะอาดกว่าโซลูชันที่ยอมรับได้คือโซลูชันที่ AnilRedshift กล่าวถึง แต่ที่ฉันจะขยายต่อไป

พูดง่ายๆคือแอตทริบิวต์ HTML มีชื่อและค่า คุณสามารถใช้ชื่อเฉพาะสำหรับ "ปิดใช้งาน", "หลายรายการ" เป็นต้น แต่เวอร์ชัน longhand ยังใช้งานได้และอนุญาตให้ React ทำงานในลักษณะที่ต้องการ

disabled={disabled ? 'disabled' : undefined} เป็นวิธีแก้ปัญหาที่ชัดเจนที่สุด

เวอร์ชันที่ฉันใช้คือ:

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

คุณสามารถค้นหาสิ่งที่คล้ายกับสิ่งนี้ได้ที่เอกสารประกอบ

https://facebook.github.io/react/docs/transferring-props.html

ในกรณีของคุณอาจเป็นเช่นนี้

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

รหัสนี้ใช้ ES6 แต่ฉันคิดว่าคุณมีความคิด

สิ่งนี้ยอดเยี่ยมเพราะคุณสามารถส่งต่อคุณลักษณะอื่น ๆ มากมายให้กับส่วนประกอบนี้ได้

วิธีทำที่ง่ายและสะอาด

<button {...disabled && {disabled: true}}>Clear cart</button>

พิการควรมาจากอุปกรณ์ประกอบฉากเช่นนี้

<MyComponent disabled />

ก่อนอื่นคุณสามารถตรวจสอบได้

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

หมายเหตุ: ค่าพิการ ** ไม่ String มันควรจะเป็นแบบบูล

ตอนนี้สำหรับไดนามิก คุณสามารถเขียน

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

อย่างที่คุณเห็นฉันใช้คุณสมบัติที่ปิดใช้งานและในวงเล็บปีกกามันสามารถเป็นตัวแปรท้องถิ่น / ตัวแปรสถานะ ตัวแปรdisableประกอบด้วยค่าจริง / เท็จ

สิ่งนี้สามารถใช้งานได้ปัญหาเกี่ยวกับการปิดใช้งานคือเราไม่สามารถตั้งค่าบูลีนให้มันได้

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}