React.js：仅当条件为真时才设置Prop

Question

我对react.js很新，并且在向孩子们传递道具方面遇到了一些麻烦。 我想做这样的事情：

render: function(){
   var idProp = this.props.id ? 'id={this.props.id}' : null;
   return (
     <div {idProp} />
   );
}

因此，只有在条件为真时才传递prop id。 但上面的代码不起作用。 这可能吗？我究竟做错了什么？ 谢谢！

Answer 1

代码中的

var idProp = this.props.id ? 'id={this.props.id}' : null;应该以javascript方式编写。你也必须移动＆＃34; id =＆＃34;到JSX语法。

render: function(){
   var idProp = this.props.id ? this.props.id : null;
   return (
     <div id={idProp} />
   );
}

JSX编译器首先将代码转换为纯js。要创建dom元素，它使用React.createElement(...)函数。要识别函数的参数，JSX编译器需要元素的属性名称是静态的。上面代码的转换后的javascript将是..

render: function(){
   var idProp = this.props.id ? this.props.id : null;
   return (
     React.createElement("div", {id: idProp})
   );
}

Answer 2

如果您可以使用它，您可以使用spread运算符整齐地完成此操作。

render: function() {
    var optionalProps = {};
    if (something) optionalProps.id = id;
    return (<div {...optionalProps} />);
}