React:内联有条件地将prop传递给组件

Question

我想知道是否有一种更好的方式来有条件地传递道具而不是使用if语句.

例如,我现在有:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    if(this.props.editable) {
      return (
        <Child editable={this.props.editableOpts} />
      );
    } else {
      // In this case, Child will use the editableOpts from its own getDefaultProps()
      return (
        <Child />
      );
    }
  }
});

有没有办法在没有if语句的情况下编写这个？我正在考虑JSX中的一种inline-if语句:

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} : null} 
      />
    );
  }
});

总结:我正试图找到一种方法来定义一个道具Child,但是传递一个值(或做一些其他的),这样Child仍然可以从Child自己的价值中提取道具的价值getDefaultProps().

Answer 1

你很接近你的想法.事实证明,传递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}
    />;
  }
});

Answer 2

定义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} />
    );
  }
});

来源,反应文档:https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

Answer 3

这可能对你有帮助。我经常使用这个方法

    <Component
      otherProps
      {...(yourCondition ? { 
        deleteIcon: <DeleteIcon id={`${id}_icon`} />,
       }
      : {})}
    />

另一种方法

<Component 
  {...(yourCondition && 
  { prop: propValue })}
/>

Answer 4

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

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

应该可以。

Answer 5

实际上，如果您的道具是布尔值，则不需要实现条件，但如果您想通过内联条件添加道具，您应该像下面这样写：

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

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

Answer 6

你也可以尝试这种快捷方式

 <Child {...(this.props.editable  && { editable: this.props.editableOpts })} />