使用 if 语句应用内联样式 (React)

Question

我想在 React 中使用内联样式应用条件渲染。

问题是：我有一个道具，根据场景吐出 1、2 或 3。所以我希望当输出为 1 或 2 时，div 出现(显示："块"(，但当 3 时，设置为无。

<div style={{
display: () => {
if (this.props.info.realm === 1 || this.props.info.realm === 2) {
console.log("this has to be block");
return "block";
} else {
console.log("this has to be none");
return "none";
}
}
}}>
<p>Hola</p>
</div>

当这段代码运行时，我只得到唯一的 Div。甚至不是控制台日志。

Answer 1

您需要调用该函数才能获取值;

在您的情况下，您可以执行 IIFE(立即调用的函数表达式(：

<div style={{
display: (() => {
if (this.props.info.realm === 1 || this.props.info.realm === 2) {
console.log("this has to be block");
return "block";
} else {
console.log("this has to be none");
return "none";
}
})()
}}>
<p>Hola</p>
</div>

或者，您可以在render方法之外执行此操作

function getDisplay() {
if (this.props.info.realm === 1 || this.props.info.realm === 2) {
return "block";
}
else {
return "none";
}
}
return (
<div style={{ display: getDisplay() }}>
<p>Hola</p>
</div>
);

或者，如果您使用的是类组件，请使用getter使其更干净：

get display() {
if (this.props.info.realm === 1 || this.props.info.realm === 2) {
return "block";
}
else {
return "none";
}
}
render() {
return (
<div style={{ display: this.display }}>
<p>Hola</p>
</div>
);
}