React组件中如何判断Prop是否存在并实现条件渲染？

错误原因 #

你写的条件判断语法有误：list !== undefined( 把比较运算符和括号直接连在一起，JavaScript会将undefined当作函数去调用，因此抛出"undefined is not a function"错误。

正确的条件渲染写法 #

方式1：短路与运算符（&&） #

这是React中最常用的“存在即渲染”写法，当list为真值（非undefined、null、false、空字符串等）时，会渲染后面的JSX：

{list && (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "1.3rem",
    }}
  >
    <ul style={{ fontSize: "1.3rem", marginLeft: "1.3rem" }}>
      {list}
    </ul>
  </div>
)}

方式2：三元运算符 #

如果需要在list不存在时渲染兜底内容，可以用三元运算符；若不需要兜底则返回null即可：

{list ? (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "1.3rem",
    }}
  >
    <ul style={{ fontSize: "1.3rem", marginLeft: "1.3rem" }}>
      {list}
    </ul>
  </div>
) : null}

方式3：针对数组的严谨判断 #

如果list是数组，建议额外判断数组长度，避免渲染空的<ul>标签：

{Array.isArray(list) && list.length > 0 && (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "1.3rem",
    }}
  >
    <ul style={{ fontSize: "1.3rem", marginLeft: "1.3rem" }}>
      {list.map((item, idx) => (
        <li key={idx}>{item}</li>
      ))}
    </ul>
  </div>
)}

内容的提问来源于stack exchange，提问作者Chicot