例如，为自定义容器使用属性样式

const DriverSelector = props => {
  const Container = props.container;
  const otherProps = {
    ...( props.containerStyles && { style: props.containerStyles } )
  };

  return (
    <Container {...otherProps} >

在我看来，管理多个条件道具的最佳方法是@brigand中的道具对象方法。但是可以对其进行改进，以避免为每个条件道具添加一个if块。

ifVal helper

重命名为你喜欢的(iv, condVal, cv， _，…)

你可以定义一个helper函数，在满足条件时返回一个值或另一个值:

// components-helpers.js
export const ifVal = (cond, trueValue=true, falseValue=null) => {
  return cond ? trueValue : falseValue
}

如果cond为真(或真)，则返回trueValue -或真。 如果cond为false(或falsy)，则返回false value -或null。

这些默认值(true和null)通常是允许道具传递或不传递给React组件的正确值。你可以把这个函数看作是一个“改进的React三元运算符”。如果您需要对返回值有更多的控制，请改进它。

让我们用很多道具来使用它。

构建(复杂的)道具对象

// your-code.js
import { ifVal } from './components-helpers.js'

// BE SURE to replace all true/false with a real condition in you code
// this is just an example

const inputProps = {
  value: 'foo',
  enabled: ifVal(true), // true
  noProp: ifVal(false), // null - ignored by React
  aProp: ifVal(true, 'my value'), // 'my value'
  bProp: ifVal(false, 'the true text', 'the false text') // 'my false value',
  onAction: ifVal(isGuest, handleGuest, handleUser) // it depends on isGuest value
};

 <MyComponent {...inputProps} />

这种方法类似于使用classnames实用程序有条件地管理类的流行方法，但适用于props。

为什么要使用这种方法

您将拥有一个干净且可读的语法，即使有许多条件道具:每个新道具只需在对象声明中添加一行代码。

通过这种方式，您可以替换重复操作符的语法噪声(…， &&， ?:，…)，当你用一个简单的函数调用有很多道具时，这可能是非常烦人的。

作为开发人员，我们的首要任务是编写最明显的代码来解决问题。 太多时候，我们只是为了自我而解决问题，在不必要的地方增加了复杂性。 我们的代码应该简单明了，无论是对今天的我们，还是对明天的我们，还是对我们的伴侣。

我们能做某事并不意味着我们就应该做

我希望这么晚的回复能有所帮助。

以一种简单的方式

const InputText= ({required = false , disabled = false, ...props}) => 
         (<input type="text" disabled={disabled} required={required} {...props} />);

像这样使用它

<InputText required disabled/>

在React中，你可以有条件地呈现组件，还有它们的属性，比如props、className、id等等。

在React中，使用三元运算符是一个很好的实践，它可以帮助你有条件地呈现组件。

一个示例还展示了如何有条件地呈现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>

这应该是可行的，因为在Ajax调用之后，您的状态将会改变，并且父组件将重新呈现。

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

使用undefined适用于大多数属性:

const name = "someName";

return (
    <input name={name ? name : undefined} />
);