React map函数内条件渲染失效问题求助

嘿，我一眼就瞅出你代码里的几个关键问题，这就是为啥条件渲染没正常工作的原因，咱们一个个来捋：

现存问题点 #

• JSX中未包裹map逻辑：在JSX里执行JavaScript代码（比如map函数）必须用{}包裹，你直接把props.content.map(...)写在<div>里，React会把它当成普通文本，根本不会执行这个遍历逻辑。
• 多余的大括号嵌套：你的map回调函数里，条件渲染外面多套了一层{}，箭头函数直接返回JSX的时候不需要额外加这个，反而会导致语法错误。
• 未闭合的组件标签：<Content title={...}这个标签没写完，既没闭合也没给title传正确的值。
• 缺少key属性：React列表渲染要求每个元素都要有唯一的key，这不仅能避免控制台警告，还能提升渲染性能。

修正后的代码 #

function ContentProcessing(props) {
  return (
    <div>
      {/* 用{}包裹map逻辑，给每个元素加key，修正条件渲染的语法 */}
      {props.content.map((content) => (
        content.type === "card" ? (
          <Card key={content.id} title={content.title} />
        ) : (
          <Content key={content.id} title={content.title} />
        )
      ))}
    </div>
  )
}

改动说明 #

1. 给props.content.map(...)加上了外层的{}，让React识别这是要执行的JavaScript逻辑。
2. 去掉了条件渲染外层多余的{}，箭头函数用小括号()直接返回三元表达式的结果（如果你的逻辑需要多行，可以改成大括号加return，比如{props.content.map(content => { if(content.type === 'card') return <Card ... />; else return <Content ... />; })}）。
3. 闭合了<Content>标签，并且把title的取值改成了合理的content.title（你可以根据实际需求调整）。
4. 给<Card>和<Content>都加上了key={content.id}，这里假设你的content对象有唯一的id属性，如果没有，也可以用索引index（但不推荐，除非列表不会重新排序）。

这样修改后，你的条件渲染应该就能正常根据content.type的值渲染不同组件啦！

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