React.js使用三元运算符做空值条件渲染不生效问题咨询

1. 核心错误：section 数据获取逻辑异常 #

你当前的代码存在一个隐蔽的索引匹配错误：
父组件中传递给子组件的section_id是section对象的id属性，但子组件中直接把这个id作为数组下标去取sections数组的元素。只有当所有section的id严格和数组索引一一对应时才能拿到正确数据，一旦id不连续/不从0开始，就会拿到undefined，此时undefined.image_left也是undefined，你判断undefined !== null结果为true，就会错误进入渲染分支，看起来像判断逻辑失效。

修正方案（二选一即可） #

方案A：父组件传递数组索引（更简洁，适合无需持久化id的场景）

父组件map时直接传递数组下标：

const sections = this.carList[car_id].sections.map((section, index) => (
  <CarContent 
    data={this.carList} 
    car_id={this.state.car_id} 
    section_index={index} 
  />
))

子组件对应修改取值逻辑：

const { car_id, data, section_index } = props;
const section = data[car_id].sections[section_index];

方案B：子组件按id匹配section（更严谨，适合id需要持久化的场景）

子组件通过find方法匹配对应id的section，不需要修改父组件代码：

const section = data[car_id].sections.find(item => item.id === section_id);

2. 条件判断逻辑优化 #

你当前的判断只覆盖了null的情况，没有覆盖undefined、空字符串的场景，同时React中条件渲染不满足时返回null比返回空字符串更合理，不会生成多余的空文本节点。

优化后的判断写法（同时兼容null、undefined、空字符串场景，符合你的需求）：

const CarContent = (props) => {
  const { car_id, data, section_id } = props;
  // 这里用上面选的方案修正section取值逻辑，示例用方案B
  const section = data[car_id].sections.find(item => item.id === section_id);

  return (
    <div className={section?.section_type || ''}>
      {/* section_text 判断示例 */}
      {section?.section_text && (
        <div className="section_text">{section.section_text}</div>
      )}
      <div className="section_images">
        {/* image_left 判断 */}
        {section?.image_left && (
          <div className="image_left">
            <img src={section.image_left} alt="" />
          </div>
        )}
        {/* image_right 判断 */}
        {section?.image_right && (
          <div className="image_right">
            <img src={section.image_right} alt="" />
          </div>
        )}
      </div>
    </div>
  );
}

代码中的?.是可选链运算符，避免section为undefined时报错，如果你的项目不支持可选链，可以替换为section && section.image_left && (...)的写法。

内容的提问来源于stack exchange，提问作者D A R K VerbalCentaurPL