Javascript 反应：内联有条件地将道具传递给组件

React: inline conditionally pass prop to component

提问by Matthew Herbst

I would like to know if there is a better way to conditionally pass a prop than using an if-statement.

我想知道是否有比使用 if 语句更好的方法来有条件地传递道具。

For example, right now I have:

例如，现在我有：

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

Is there a way to write this without the if-statement? I am was thinking something along the lines of a type of inline-if-statement in the JSX:

有没有办法在没有 if 语句的情况下写这个？我在想一些类似于 JSX 中的 inline-if-statement 类型的东西：

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

To wrap-up: I'm trying to find a way to define a prop for Child, but pass a value (or do something else) such that Childstill pulls that prop's value from Child's own getDefaultProps().

总结：我试图找到一种方法来为 定义一个道具Child，但传递一个值（或做其他事情），这样Child仍然可以从Child自己的 中提取该道具的值getDefaultProps()。

回答by Jim Skerritt

You were close with your idea. It turns out that passing undefinedfor a prop is the same as not including it at all, which will still trigger the default prop value. So you could do something like this:

你很接近你的想法。事实证明，传递undefined一个 prop 与根本不包含它是一样的，这仍然会触发默认的 prop 值。所以你可以做这样的事情：

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

回答by Jamal Hussain

Add a spread operator to the this.props.editable:

向 中添加扩展运算符this.props.editable：

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

should works.

应该有效。

回答by Leon Gilyadov

Define propsvariable:

定义props变量：

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

And then use it in JSX:

然后在 JSX 中使用它：

<Child {...props} />

Here is a solution in your code:

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

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

Source, React documentation: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

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

回答by AmerllicA

Actually, if your prop is boolean it isn't needed to implement condition but if you wanna add prop by inline condition you should write like below:

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

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

Hope it doesn't confuse you. the {...means it is spread operator like passing existed props: {...props}and the editable &&means if editableis truethe { editable: editableOpts }object will make and with {...we will make a new object like it: {...{ editable: editableOpts }}that it means editable={editableOpts}but if this.porps.editableis true.

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

回答by sanair96

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

This passes the props if they are defined. Else the props are not passed. In the other answer's the props are still passed but the value is undefinedwhich still means the props are being passed.

如果它们被定义，这将传递道具。否则道具不会通过。在另一个答案中，道具仍然被传递，但值undefined仍然意味着道具正在被传递。