Jak warunkowo dodać atrybuty do komponentów Reactowych?

Po prostu rzucam inną opcję, ale @ juandemarco ' S odpowiedź jest zwykle poprawna.

Zbuduj obiekt jak chcesz:

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

if (condition) inputProps.disabled = true;

Renderuj z spreadem, opcjonalnie przekazując również inne właściwości.

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

Oto przykład użycia Bootstrap's Button via React-Bootstrap.

var condition = true;

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

W zależności od warunku zostaną zwrócone {bsStyle: 'success'} lub {}. Operator spread rozprzestrzeni następnie Właściwości zwracanego obiektu na komponent Button. W przypadku falsy, ponieważ na zwracanym obiekcie nie istnieją żadne właściwości, nic nie zostanie przekazane do komponentu.

Alternatywny sposób oparty na komentarzu @ Andy Polhill poniżej:

var condition = true;

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

Jedyną małą różnicą jest to, że w drugim przykładzie wewnętrzny komponent <Button/> S props obiekt będzie miał klucz bsStyle o wartości undefined.

Spóźnienie na imprezę. Oto alternatywa.

var condition = true;

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

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

Lub jego wersja inline

var condition = true;

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

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

Spóźnienie na imprezę.

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

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

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

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

Jeśli używasz es6, możesz po prostu napisać w ten sposób.

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

To powinno zadziałać, ponieważ twój stan zmieni się po wywołaniu ajax, a komponent macierzysty ponownie wyrenderuje.

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

Tak to zrobię.

Z Warunkowym :

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

Nadal wolę używać regularnego sposobu przekazywania rekwizytów w dół, ponieważ jest bardziej czytelny (moim zdaniem) w przypadku nie mają żadnych warunków.

Bez warunku :

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

Rozważając ten post https://facebook.github.io/react/tips/if-else-in-JSX.html możesz rozwiązać swój problem w ten sposób

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

W Reaccie możesz warunkowo renderować komponenty, ale także ich atrybuty, takie jak props, className, id i inne.

W Reaccie bardzo dobrą praktyką jest używanie "operatora trójdzielnego", który może Ci pomóc warunkowo Renderuj Komponenty.

Przykład pokazuje również jak warunkowo renderować komponent i jego styl atribute

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>