Jak warunkowo dodać atrybuty do składników React?

Czy istnieje sposób dodawania atrybutów do komponentu React tylko wtedy, gdy spełniony jest określony warunek?

Powinienem dodać wymagane i atrybuty readOnly, aby utworzyć elementy oparte na wywołaniu Ajax po renderowaniu, ale nie widzę, jak to rozwiązać, ponieważ readOnly = „false” to nie to samo, co całkowite pominięcie atrybutu.

Poniższy przykład powinien wyjaśnić, czego chcę, ale to nie zadziała (Błąd analizy: nieoczekiwany identyfikator).

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

Najwyraźniej w przypadku niektórych atrybutów React jest wystarczająco inteligentny, aby pominąć atrybut, jeśli przekazywana mu wartość nie jest prawdziwa. Na przykład:

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

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

spowoduje:

<input type="text" required>

Aktualizacja: jeśli ktoś jest ciekaw, jak / dlaczego tak się dzieje, można znaleźć szczegóły w kodzie źródłowym ReactDOM, w szczególności na liniach 30 i 167 w DOMProperty.js pliku.

Odpowiedź juandemarco jest zwykle poprawna, ale oto inna opcja.

Zbuduj obiekt tak, jak lubisz:

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

if (condition)
  inputProps.disabled = true;

Renderuj z rozkładaniem, opcjonalnie również z innymi rekwizytami.

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

Poniżej przedstawiono przykład zastosowania bootstrap „S Buttonpoprzez React-Bootstrap (wersja 0.32.4)

var condition = true;

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

W zależności od warunku albo {bsStyle: 'success'}albo {}zostanie zwrócone. Operator rozkładania rozłoży następnie właściwości zwróconego obiektu na Buttonkomponent. W przypadku fałszowania, ponieważ na zwróconym obiekcie nie istnieją żadne właściwości, nic nie zostanie przekazane do komponentu.

Alternatywny sposób oparty na komentarzu Andy'ego Polhilla :

var condition = true;

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

Jedyną niewielką różnicą, że w drugim przykładzie Element wewnętrzny <Button/>jest propsobiekt zawiera klucz bsStyleo wartości undefined.

Oto alternatywa.

var condition = true;

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

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

Lub jego wersja wbudowana

var condition = true;

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

Oto jak to zrobić.

Z warunkiem :

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

Nadal wolę używać zwykłego sposobu przekazywania rekwizytów, ponieważ jest on bardziej czytelny (moim zdaniem) w przypadku braku warunkowych.

Bez warunku :

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

Możesz użyć tego samego skrótu, który służy do dodawania / usuwania (części) komponentów ( {isVisible && <SomeComponent />}).

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

Powiedzmy, że chcemy dodać niestandardową właściwość (używając aria- * lub data- *), jeśli warunek jest spełniony:

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

Powiedzmy, że chcemy dodać właściwość stylu, jeśli warunek jest spełniony:

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

Jeśli używasz ECMAScript 6, możesz po prostu pisać w ten sposób.

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

Powinno to działać, ponieważ stan zmieni się po wywołaniu Ajax, a komponent nadrzędny zostanie zrenderowany.

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

W React możesz warunkowo renderować komponenty, ale także ich atrybuty, takie jak rekwizyty, nazwa_klasy, identyfikator i inne.

W React bardzo dobrą praktyką jest używanie operatora trójskładnikowego, który może pomóc w warunkowym renderowaniu Komponentów.

Przykład pokazuje również, jak warunkowo renderować komponent i jego atrybut stylu.

Oto prosty przykład:

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>

Biorąc pod uwagę post JSX In Depth , możesz rozwiązać swój problem w ten sposób:

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