React 使用运算符进行条件渲染

元素变量

声明一个变量并使用 if 语句进行条件渲染

let tempName = "lisi";

let tempUser;
if (tempName == "zhangshan") {
  tempUser = <h1>zhangshan</h1>;
} else {
    tempUser = <h1>other</h1>;
}

ReactDOM.render(
  tempUser,
  document.getElementById('root')
);

与运算符 &&

在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

let isZhangShan = false;

ReactDOM.render(
  <div>
    <p>name:</p>
    {isZhangShan&&<h1>zhangshan</h1>}
  </div>,
  document.getElementById('root')
);

或运算符 ||

const haha = false; // = 0; //<h1>haha</h1>;
ReactDOM.render(
  (haha||<h1>hehe</h1>),
  document.getElementById('root')
);

let param = {
    execStateList: executionStatus || [],
    engineeringList: engineeringCodeList || [],
}

三目运算符

三目运算符 condition ? true : false

let tempName = "zhangshan";

ReactDOM.render(
  (tempName == "zhangshan"?<h1>zhangshan</h1>:<h1>other</h1>),
  document.getElementById('root')
);

TO

条件渲染: https://react.docschina.org/docs/conditional-rendering.html

最后

以上就是活泼荔枝为你收集整理的React 使用运算符进行条件渲染的全部内容，希望文章能够帮你解决React 使用运算符进行条件渲染所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。