React点击事件向组件传递Props失效问题求助

你的代码无法正常工作的核心原因是：在onClick事件回调里直接返回<Products>组件是无效操作——这只是创建了一个React元素，但并没有将它挂载到组件的渲染输出中，所以Products组件不会被渲染，自然也接收不到传递的props。

修正后的代码示例 #

./Components/Categories.jsx

import { useState } from 'react';
import CategoryData from "../mocks/categories.json"
import Products from './Products'

function Categories() {
  // 用状态存储选中的分类ID
  const [selectedCatId, setSelectedCatId] = useState(null);

  return (
    <>
      <ul>
        {CategoryData.map((cat) => (
          <li 
            key={cat.id} // 遍历列表必须添加唯一key，避免React警告
            onClick={() => setSelectedCatId(cat.id)}
          >
            {cat.name} {/* 显示分类名称，假设你的数据里有name字段 */}
          </li>
        ))}
      </ul>
      {/* 只有选中分类后，才渲染Products组件并传递props */}
      {selectedCatId && <Products id={selectedCatId} />}
    </>
  );
}

./Components/Products.jsx

function Products(props) {
  console.log(props.id);
  // 组件需要返回JSX才能在页面上显示内容
  return <div>当前选中的分类ID：{props.id}</div>;
}

逻辑说明 #

1. 使用useState创建状态selectedCatId，用来跟踪用户点击的分类ID
2. 点击<li>时，调用setSelectedCatId更新状态
3. 在组件的渲染输出中，当selectedCatId有值时，渲染Products组件并传入id props
4. Products组件接收到props后，即可正常使用并渲染内容

额外优化（可选） #

如果需要支持“点击同一个分类取消选中”的逻辑，可以修改onClick的回调：

onClick={() => setSelectedCatId(prev => prev === cat.id ? null : cat.id)}

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