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

在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>

如果使用ECMAScript 6，则可以这样编写。

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

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

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

这是我做到的方式。

有条件的：

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

我仍然更喜欢使用常规的方式传递道具，因为（在我看来）在没有任何条件的情况下它更具可读性。

没有条件：

<Label text={label} type={type} tooltip={tooltip} 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行。