ฉันจะเพิ่มแอททริบิวต์แบบมีเงื่อนไขลงไปในส่วนประกอบ React ได้อย่างไร

มีวิธีการที่จะเพิ่มคุณสมบัติให้กับองค์ประกอบการตอบสนองหากเงื่อนไขตรงหรือไม่?

ฉันควรจะเพิ่มแอตทริบิวต์ที่จำเป็นและ readOnly เพื่อสร้างองค์ประกอบตามการเรียก Ajax หลังจากแสดงผล แต่ฉันไม่เห็นวิธีแก้ปัญหานี้เนื่องจาก readOnly = "false" ไม่เหมือนกับการละเว้นแอตทริบิวต์ทั้งหมด

ตัวอย่างด้านล่างควรอธิบายสิ่งที่ฉันต้องการ แต่จะไม่ทำงาน (ข้อผิดพลาดในการแยกวิเคราะห์: ตัวระบุที่ไม่คาดคิด)

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

เห็นได้ชัดว่าสำหรับคุณลักษณะบางอย่าง React นั้นฉลาดพอที่จะละเว้นแอตทริบิวต์นั้นได้หากค่าที่คุณส่งไปนั้นไม่ใช่ความจริง ตัวอย่างเช่น:

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

จะส่งผลให้:

<input type="text" required>

อัปเดต:หากใครอยากรู้ว่าสิ่งนี้เกิดขึ้นได้อย่างไรคุณสามารถค้นหารายละเอียดได้ในซอร์สโค้ดของ ReactDOM โดยเฉพาะที่บรรทัดที่30และ167ของไฟล์DOMProperty.js

คำตอบของ juandemarcoนั้นถูกต้อง แต่นี่เป็นอีกทางเลือกหนึ่ง

สร้างวัตถุตามที่คุณต้องการ:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

แสดงผลด้วยสเปรดหรือผ่านอุปกรณ์ประกอบฉากอื่นด้วย

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

นี่คือตัวอย่างของการใช้เงินทุนของButtonผ่านReact-Bootstrap (เวอร์ชั่น 0.32.4):

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

ทั้งนี้ขึ้นอยู่กับเงื่อนไขอย่างใดอย่างหนึ่ง{bsStyle: 'success'}หรือ{}จะถูกส่งกลับ ผู้ประกอบการแพร่กระจายจะกระจายคุณสมบัติของวัตถุที่ส่งคืนไปยังButtonส่วนประกอบ ในกรณีที่เป็นเท็จเนื่องจากไม่มีคุณสมบัติบนวัตถุที่ส่งคืนจะไม่มีการส่งผ่านไปยังคอมโพเนนต์

อีกทางเลือกหนึ่งตามความคิดเห็นของ Andy Polhill :

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

ความแตกต่างเล็ก ๆ เท่านั้นที่อยู่ในตัวอย่างที่สององค์ประกอบภายใน<Button/>ของpropsวัตถุจะมีกุญแจที่มีค่าของbsStyleundefined

นี่คือทางเลือก

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

หรือรุ่นอินไลน์

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

นี่คือวิธีที่ฉันทำ

ด้วยเงื่อนไข :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

ฉันยังคงชอบใช้วิธีปกติในการส่งอุปกรณ์ประกอบฉากลงเพราะมันสามารถอ่านได้มากขึ้น (ตามความเห็นของฉัน) ในกรณีที่ไม่มีเงื่อนไขใด ๆ

ไม่มีเงื่อนไข :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

คุณสามารถใช้ทางลัดเดียวกันซึ่งใช้เพื่อเพิ่ม / ลบ (ส่วนประกอบของ) ส่วนประกอบ ( {isVisible && <SomeComponent />})

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

สมมติว่าเราต้องการเพิ่มคุณสมบัติที่กำหนดเอง (โดยใช้ aria- * หรือ data- *) หากเงื่อนไขเป็นจริง:

{...this.props.isTrue && {'aria-name' : 'something here'}}

สมมติว่าเราต้องการเพิ่มคุณสมบัติสไตล์หากเงื่อนไขเป็นจริง:

{...this.props.isTrue && {style : {color: 'red'}}}

หากคุณใช้ ECMAScript 6 คุณสามารถเขียนได้เช่นนี้

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

สิ่งนี้จะได้ผลเนื่องจากสถานะของคุณจะเปลี่ยนไปหลังจากการเรียก Ajax และองค์ประกอบหลักจะแสดงผลอีกครั้ง

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}

ในการตอบสนองคุณสามารถสร้างการแสดงผลแบบมีเงื่อนไข แต่ยังรวมถึงคุณลักษณะของพวกเขาเช่นอุปกรณ์ประกอบฉาก className, id และอื่น ๆ

ในการตอบสนองเป็นวิธีปฏิบัติที่ดีมากในการใช้ตัวดำเนินการประกอบไปด้วยซึ่งสามารถช่วยให้คุณสร้างองค์ประกอบได้

ตัวอย่างยังแสดงวิธีการแสดงผล Component และคุณลักษณะสไตล์ของมันแบบมีเงื่อนไข

นี่คือตัวอย่างง่ายๆ:

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

พิจารณาโพสต์JSX ในเชิงลึกคุณสามารถแก้ปัญหาของคุณด้วยวิธีนี้:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);