Question

我想通过React的内联样式应用条件渲染。

问题是：我有个道具，根据情况会吐出1、2或3。所以我希望当输出为1或2时，div出现（显示：“ block”），但是当3时，设置为none。

<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。甚至没有console.logs。

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

使用if语句应用内联样式（反应）

1 个答案: