用样式响应 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 不喜欢的(它抱怨"styleprop 期望从样式属性到值的映射，而不是字符串"，即使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>