React.js：只有在条件为真的情况下设置Prop才能

Question

我对react.js很陌生，并且有些问题会通过道具传递给孩子。 我想要做这样的事情：

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

所以道具ID只应在条件为真过去了。 但上面的代码不起作用。 这可能吗？我究竟做错了什么？ 谢谢！

Answer 1

在你的代码var idProp = this.props.id ? 'id={this.props.id}' : null;应该用JavaScript编写的方式。你也必须将“id =”移动到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} />); 
}