用樣式反應jsx表達式

Question

<Link style={!id && {'cursor':'normal'}}>link</Link>

我上面的jsx表達式有問題嗎？ 如果未定義id，則嘗試添加樣式。

Answer 1

使用三元運算符。

<Link style={!id ? { cursor:'normal' } : null}>link</Link>

Answer 2

可悲的是， 文檔中沒有對此進行討論。

但憑經驗，不行，您不能那樣做，因為當有id ，您最終會得到style={false} ，這是React所不喜歡的（它抱怨說： “ style道具希望從樣式屬性的值，而不是字符串。”，即使false不是字符串）。

根據經驗，使用null或undefined作品，這意味着條件運算符：

style={id ? null : {cursor: "normal"})

例：

 const Foo = props => <div style={props.id ? null : {color: "green"}}>Testing</div>; ReactDOM.render( <div> <Foo id="a" /> <Foo /> </div>, document.getElementById("react") ); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> 

...或添加|| ，這非常難看：

style={!id && {cursor: "normal"} || null}

例：

 const Foo = props => <div style={!props.id && {color: "green"} || null}>Testing</div>; ReactDOM.render( <div> <Foo id="a" /> <Foo /> </div>, document.getElementById("react") ); 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>