如何有条件地向React组件添加属性？

如果满足特定条件，是否有办法仅将属性添加到R​​eact组件？

我应该在渲染后基于Ajax调用将required和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" : ""} />
        );
    }
});

显然，对于某些属性，如果您传递给它的值不真实，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的源代码中找到详细信息，特别是在DOMProperty.js文件的第30和167行。

juandemarco的答案通常是正确的，但这是另一种选择。

用自己喜欢的方式构建对象：

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

if (condition)
  inputProps.disabled = true;

以传播方式渲染，也可以选择通过其他道具。

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

下面是使用的示例自举的Button经由阵营的自举（版本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对象将具有bsStyle一个值为的键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} />

您可以使用相同的快捷方式，该快捷方式用于添加/删除组件（的一部分{isVisible && <SomeComponent />}）（）。

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

假设我们想在条件为真的情况下添加自定义属性（使用aria- *或data- *）：

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

假设我们想在条件为true的情况下添加样式属性：

{...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>
    );
}

在React中，您可以有条件地渲染Components，还可以渲染它们的属性，例如props，className，id等。

在React中，使用三元运算符是一种很好的做法它可以帮助您有条件地渲染Components。

一个示例还显示了如何有条件地渲染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 In Depth，您可以通过以下方式解决您的问题：

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