在单独的页面上向组件发送道具

Question

./Components/Categories.jsx

import CategoryData from "../mocks/categories.json"
import Products from './Products'

function Categories() {
  return  CategoryData.map((cat)=> <li onClick={ ()=> <Products id={cat.id} /> }> </li>) 

}

./Components/Products.jsx

function Products(props) {
    console.log(props.id)
}

我需要将道具发送到 OnClick 中的另一个组件。但是我写的代码没有用。

Answer 1

嗨，你做错了一件事。 我们无法在事件处理程序中呈现组件。

你可以这样做：

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

function Categories() {
  const [categroy, setCategroy] = useState(null);

  const clickCategory = (cat) => {
    setCategroy(cat);
  };

  return (
    <ul>
      {CategoryData.map((cat) => (
        <li key={cat.id} onClick={() => clickCategory(cat)}>
          {cat.name}
        </li>
      ))}
      {categroy && <Products id={categroy.id} />}
    </ul>
  );
}

export default Categories;