React子组件遍历对象数组时如何将指定属性值传递给父组件

你的代码中data2是和App组件同作用域定义的顶层常量，父组件本身可直接访问，不需要从子组件反向获取。现有代码无法实现需求的核心原因有两个：

• 传入Child组件的onClick属性未被子组件接收，也没有绑定到任何可交互元素，点击行为不会触发回调
• 未明确获取data2中哪个条目的link：如果是固定取某一个条目，直接在父组件读取data2对应索引的属性即可；如果是要获取用户点击对应条目的link，需要子组件触发点击事件时将当前条目参数传回父组件。

实现步骤 #

1. 修改Child组件，解构接收onClick属性，渲染列表项时在可点击元素上绑定点击事件，把当前项的link作为参数传入onClick回调
2. 父组件的回调直接接收子组件传回的link值，传入handleUpdate方法即可

修改后完整代码 #

import * as React from 'react';
import './style.css';

const data = [
  { title: 'hey', description: 'description' },
  { title: 'hey1', description: 'description' },
  { title: 'hey2', description: 'description' },
];

const data1 = [
  { title: 'hey', description: 'description' },
  { title: 'hey1', description: 'description' },
  { title: 'hey2', description: 'description' },
];

const data2 = [
  { title: 'hey', link: 'link/hey' },
  { title: 'hey1', link: 'link/he1' },
  { title: 'hey2', link: 'link/he2' },
];

export default function App() {
  const [, setCookie] = useCookie('example');

  const handleUpdate = (cookieValue) => {
    setCookie(null);
    setCookie(cookieValue);
  };

  return (
    <div>
      <h2>App - Parent</h2>
      <Child items={data} />
      <Child items={data1} />
      <Child
        onClick={(currentLink) => handleUpdate(currentLink)}
        items={data2}
      />
    </div>
  );
}

export function Child({ items, onClick }) {
  return (
    <div>
      <h2>Child</h2>
      <ul>
        {items.map((item, index) => {
          return (
            <li key={index}>
              <p>{item.title}</p>
              {item.link && onClick ? (
                <a 
                  href={item.link}
                  onClick={(e) => {
                    // 不需要默认跳转行为就保留这行，需要跳转则删除
                    e.preventDefault();
                    onClick(item.link);
                  }}
                >
                  Go to title
                </a>
              ) : (
                <a href={item.link}>Go to title</a>
              )}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

其他场景处理 #

如果不需要跟随用户点击获取对应link，只是要固定取data2中某一项的link，不需要修改子组件，直接在父组件读取对应属性即可：

<Child
  // 示例取data2第一个条目的link
  onClick={() => handleUpdate(data2[0].link)}
  items={data2}
/>

如果要获取data2所有link值，直接在父组件遍历即可：

const allLinks = data2.map(item => item.link)

注意：列表渲染时请给最外层元素添加唯一key属性，避免React渲染告警，示例中用索引做key仅为演示，生产环境建议使用条目的唯一ID替代。

内容的提问来源于stack exchange，提问作者S.Marx