[javascript] 조건부로 React 컴포넌트에 속성을 추가하려면 어떻게해야합니까?

특정 조건이 충족되는 경우에만 React 구성 요소에 속성을 추가하는 방법이 있습니까?

렌더링 후 Ajax 호출을 기반으로 요소를 형성하기 위해 필수 및 readOnly 속성을 추가해야하지만 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" : ""} />
        );
    }
});

답변

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

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

<input type="text" required>

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

if (condition)
  inputProps.disabled = true;

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

var condition = true;

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

var condition = true;

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

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

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

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

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