反应：内联有条件地将prop传递给组件

猴子GO 2020.03.17

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return (
      <Child 
        {...(this.props.editable && {editable=this.props.editableOpts})} 
      />
    );
  }
});

如果定义了道具，则通过这些道具。否则道具没有通过。在另一个答案中，道具仍被传递，但是值undefined仍然表示道具正在传递。

阿良 2020.03.17

实际上，如果您的prop是布尔值，则不需要实现条件，但是如果您想通过内联条件添加prop，则应如下所示：

const { editable, editableOpts } = this.props;
return (
  <Child {...(editable && { editable: editableOpts } )} />
);

希望它不会使您感到困惑。的{...手段是传播经营者喜欢通过存在的道具：{...props}和editable &&手段，如果editable是true的{ editable: editableOpts }对象将与{...我们将一个新的对象喜欢它：{...{ editable: editableOpts }}它意味着editable={editableOpts}，但如果this.porps.editable是真实的。

老丝Jim 2020.03.17

将价差运算符添加到this.props.editable：

<Child {...(this.props.editable ? {editable: {this.props.editableOpts}} : undefined)} >

应该可以。

Gil王者一打九 2020.03.17

定义props变量：

let props = {};
if (this.props.editable){
  props.editable = this.props.editable;
}

然后在JSX中使用它：

<Child {...props} />

这是您的代码中的解决方案：

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    let props = {};
    if (this.props.editable){
      props.editable = this.props.editable;
    }
    return (
      <Child {...props} />
    );
  }
});

来源，React文档：https : //facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

乐StafanJim 2020.03.17

您的想法很贴切。事实证明，传递undefined道具与完全不包含道具相同，这仍会触发默认道具值。因此，您可以执行以下操作：

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return <Child 
      editable={this.props.editable ?
                  this.props.editableOpts : 
                  undefined}
    />;
  }
});