React组件传值：如何将Component1的属性传递给Component2

核心思路是状态提升——把选中项的状态放到父组件Component0中，通过props将状态和状态更新方法传递给两个子组件，实现组件间的数据同步。

代码实现示例 #

1. 父组件 Component0

负责管理选中项状态，并传递给子组件：

import { useState } from 'react';
import Component1 from './Component1';
import Component2 from './Component2';

function Component0() {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <div className="component-container">
      <Component1 onItemSelect={setSelectedItem} />
      <Component2 selectedItem={selectedItem} />
    </div>
  );
}

export default Component0;

2. 子组件 Component1

渲染列表项，点击时触发父组件的状态更新方法：

import { useState } from 'react';

function Component1({ onItemSelect }) {
  const [items] = useState([
    { id: 1, title: '示例标题1', array: ['子项1-1', '子项1-2'] },
    { id: 2, title: '示例标题2', array: ['子项2-1', '子项2-2', '子项2-3'] },
    // 可根据需求添加更多列表项
  ]);

  return (
    <ul className="item-list">
      {items.map(item => (
        <li
          key={item.id}
          onClick={() => onItemSelect(item)}
          style={{ 
            cursor: 'pointer', 
            padding: '8px',
            backgroundColor: item.id === selectedItem?.id ? '#e8f4f8' : 'transparent'
          }}
        >
          {item.title}
        </li>
      ))}
    </ul>
  );
}

export default Component1;

3. 子组件 Component2

接收选中项数据，渲染详情内容：

function Component2({ selectedItem }) {
  if (!selectedItem) {
    return <div className="empty-tip">请选择一个列表项查看详情</div>;
  }

  return (
    <div className="detail-panel">
      <h3>{selectedItem.title}</h3>
      <ul className="detail-list">
        {selectedItem.array.map((subItem, idx) => (
          <li key={idx}>{subItem}</li>
        ))}
      </ul>
    </div>
  );
}

export default Component2;

常见问题排查（针对你之前实现过现在失效的情况） #

• key值错误：列表渲染时key必须唯一，优先用item.id而非index，避免因列表重排导致的状态混乱
• 状态传递遗漏：检查Component1的onClick是否正确调用了onItemSelect并传递了完整的item对象
• 空值未处理：Component2必须处理selectedItem为null的情况，否则会出现读取属性报错
• 事件被阻止：检查是否有父元素设置了pointer-events: none，或者点击事件被其他逻辑拦截

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