React父组件传数组给子组件渲染列表出现元素合并问题

• Array.filter()返回值是数组，不是单个对象。你执行筛选后得到的filteredContent是长度为1的数组，结构为[选中的tab对象]，而非你预期的单个tab对象。
• 传值与遍历逻辑不匹配。你将长度为1的filteredContent数组传给子组件后，子组件遍历这个数组时只会循环1次，循环项为选中的tab对象，此时你输出content.content实际是直接渲染tab的content数组，React会把数组内的字符串直接拼接展示，因此只出现一个包含拼接内容的列表项。

步骤1：优化筛选逻辑，直接取单个激活tab #

筛选单个匹配项不要用filter，改用Array.find()直接返回符合条件的对象：

const activeTab = this.state.tabs.find((tab, index) => index === this.state.activeTab)

步骤2：正确传递要渲染的内容数组 #

将激活tab内部的content数组传给子组件，而非筛选得到的tab数组：

// 父组件调用子组件时传值
<ChildComponent content={activeTab.content} />

步骤3：修正子组件的遍历渲染逻辑 #

子组件拿到的prop已经是要渲染的字符串数组，直接遍历数组元素即可，记得给列表项加唯一key避免React警告：

<ul>
  {this.props.content.map((item, index) => <li key={index}>{item}</li>)}
</ul>

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