Bagaimana cara menambahkan atribut ke Bereaksi komponen secara kondisional?

Apakah ada cara untuk hanya menambahkan atribut ke komponen Bereaksi jika kondisi tertentu terpenuhi?

Saya seharusnya menambahkan atribut yang diperlukan dan readOnly untuk membentuk elemen berdasarkan panggilan Ajax setelah render, tapi saya tidak bisa melihat bagaimana menyelesaikannya karena readOnly = "false" tidak sama dengan menghilangkan atribut sepenuhnya.

Contoh di bawah ini harus menjelaskan apa yang saya inginkan, tetapi itu tidak akan berfungsi (Parse Error: Unexpected identifier).

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" : ""} />
        );
    }
});

Rupanya, untuk atribut tertentu, Bereaksi cukup cerdas untuk menghilangkan atribut jika nilai yang Anda berikan tidak benar. Sebagai contoh:

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

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

akan menghasilkan:

<input type="text" required>

Pembaruan: jika ada yang ingin tahu bagaimana / mengapa ini terjadi, Anda dapat menemukan detail dalam kode sumber ReactDOM, khususnya pada baris 30 dan 167 dari file DOMProperty.js .

Jawaban juandemarco biasanya benar, tetapi di sini ada pilihan lain.

Bangun objek sesuka Anda:

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

if (condition)
  inputProps.disabled = true;

Jadikan menyebar, secara opsional juga meloloskan alat peraga lainnya.

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

Berikut adalah contoh penggunaan Bootstrap 's Buttonmelalui Bereaksi-Bootstrap (versi 0.32.4):

var condition = true;

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

Bergantung pada kondisinya, dapat {bsStyle: 'success'}atau {}akan dikembalikan. Operator spread kemudian akan menyebarkan properti dari objek yang dikembalikan ke Buttonkomponen. Dalam kasus falsy, karena tidak ada properti pada objek yang dikembalikan, tidak ada yang akan diteruskan ke komponen.

Cara alternatif berdasarkan komentar Andy Polhill :

var condition = true;

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

Satu-satunya perbedaan kecil adalah bahwa dalam contoh kedua komponen dalam <Button/>'s propsobjek akan memiliki kunci bsStyledengan nilai undefined.

Berikut ini sebuah alternatif.

var condition = true;

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

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

Atau versi inline-nya

var condition = true;

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

Inilah cara saya melakukannya.

Dengan syarat :

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

Saya masih lebih suka menggunakan cara biasa untuk menurunkan props, karena lebih mudah dibaca (menurut saya) dalam kasus tidak memiliki persyaratan.

Tanpa syarat :

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

Anda dapat menggunakan pintasan yang sama, yang digunakan untuk menambah / menghapus (bagian dari) komponen ( {isVisible && <SomeComponent />}).

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

Katakanlah kita ingin menambahkan properti khusus (menggunakan aria- * atau data- *) jika kondisinya benar:

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

Katakanlah kita ingin menambahkan properti gaya jika kondisinya benar:

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

Jika Anda menggunakan ECMAScript 6, Anda cukup menulis seperti ini.

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

Ini akan berfungsi, karena status Anda akan berubah setelah panggilan Ajax, dan komponen induk akan di-render ulang.

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

Di Bereaksi Anda dapat membuat Komponen secara kondisional, tetapi juga atributnya, seperti alat peraga, className, id, dan banyak lagi.

Dalam Bereaksi itu praktik yang sangat baik untuk menggunakan operator ternary yang dapat membantu Anda membuat Komponen secara kondisional.

Contoh juga menunjukkan bagaimana membuat Komponen dan atribut style-nya secara kondisional.

Ini adalah contoh sederhana:

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>

Mempertimbangkan pos JSX Dalam Kedalaman , Anda dapat memecahkan masalah Anda dengan cara ini:

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