NextJS/React：如何通过父组件子元素映射数组并引用对象属性

你的核心问题在于：父组件中直接写的{item.name}里的item并不在父组件的作用域内，它只存在于Child组件的array.map循环中。要让父组件传递的子元素能用到每个循环项的属性，需要把children改成一个函数，让Child组件在遍历数组时把当前item传给这个函数，从而动态生成对应的JSX。

修改后的代码实现 #

1. 调整Child组件，支持函数式children #

export default function Child({ array, children }) {
  return (
    <div>
      {array.map((item, index) => {
        // 若children是函数，传入当前item执行，返回对应JSX
        return typeof children === 'function' 
          ? children(item) 
          : children;
      })}
    </div>
  );
}

注意：给map循环加上key属性（比如用item.name或index），避免React的key警告，优化渲染性能。

2. 父组件传递函数式children #

export default function Parent() {
  const playerList = [ { name: 'Spencer' }, { name: 'Jimmy' }, { name: 'Frank' } ];
  
  return (
    <div>
      <Child array={playerList}>
        {(item) => <div>{item.name}</div>}
      </Child>

      <h1>Another example of sending different children to the Child component</h1>
      <Child array={playerList}>
        {(item) => (
          <div className="player-card">
            <h1>{item.name}</h1>
            <p>Name of player</p>
          </div>
        )}
      </Child>
    </div>
  );
}

关键说明 #

• 这种模式叫做Render Props，是React中实现组件逻辑复用、动态渲染内容的常用方案。
• 通过让children成为接收item参数的函数，父组件可以灵活定义每个数组项对应的渲染内容，同时能直接访问到当前循环的item属性。
• 如果需要兼容非函数式的children（比如静态文本），Child组件里的判断逻辑可以保留，确保组件的灵活性。

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