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