在反应中传递价值

Question

我有一个带有很多按钮的组件，这些按钮会增加计数器。我需要在主组件中将计数器一直向上，所以我想传递Counter 值；

import { useState } from "react";
import Card from "./Card";

const ProductList = (props) => {
    const products = props.products;
    const [ Counter, setCounter ] = useState(0);
    const Count = n => { setCounter(v => v + n) }

    return ( 
        <div className="ProductList" >
            {products.map((product) => (
                <Card product={product} key={product.id} C={Count} />))}
        </div>
    );
}

export default ProductList;

直到父组件：

import { useEffect, useState } from "react";
import ProductList from "./ProductList";

const Products = () => {
    const [products, setProducts] = useState (null);

    useEffect (() => {
        fetch('http://localhost:8000/products')
            .then(res => {
                return res.json();
            })
            .then(data => {
                setProducts(data);
            })
    }, []);
    
    return ( 
        <div className="ProductList">
            {products && <ProductList products={products}/>}
        </div>
    );
}

export default Products;

这是一个简单的问题，但我不确定它是如何工作的。任何人都可以帮忙吗？谢谢！

Answer 1

如果您需要Products 组件中的Counter 引用，您应该在组件本身中定义它并将函数引用向下传递给子组件。

尝试像这样更改您的代码：

Products组件：

const Products = () => {
  const [products, setProducts] = useState(null);
  const [Counter, setCounter] = useState(0);
  
  const count = (n) => {
    setCounter((v) => v + n);
  };

  useEffect(() => {
    fetch('http://localhost:8000/products')
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setProducts(data);
      });
  }, []);

  return (
    <div className='ProductList'>
      {products && <ProductList products={products} count={count}/>}
    </div>
  );
};

export default Products;

ProductList 组件

import Card from "./Card";

const ProductList = (props) => {
    const products = props.products;
    const count = props.count
    
    return ( 
        <div className="ProductList" >
            {products.map((product) => (
                <Card product={product} key={product.id} C={count} />))}
        </div>
    );
}

export default ProductList;

但是，如果您需要将函数向下传递多个级别，您可能应该使用Context API，但从问题来看，我认为您只需要向下一层。

Answer 2

在父组件中定义计数器状态，然后将计数器和 setCounter 作为道具传递给子组件。用 setCounter 更新计数器，它也会在父组件中更新。

孩子：

import Card from "./Card";

const ProductList = ({counter, setCounter}) => {
    const products = props.products;
    const Count = n => { setCounter(v => v + n) }

    return ( 
        <div className="ProductList" >
            {products.map((product) => (
                <Card product={product} key={product.id} C={Count} />))}
        </div>
    );
}

export default ProductList;

家长：

import ProductList from "./ProductList";

const Products = () => {
    const [products, setProducts] = useState (null);
    const [counter, setCounter] = useState(0);

    useEffect (() => {
        fetch('http://localhost:8000/products')
            .then(res => {
                return res.json();
            })
            .then(data => {
                setProducts(data);
            })
    }, []);
    
    return ( 
        <div className="ProductList">
            {products && 
         <ProductList 
             counter={counter} 
             setCounter={setCounter}
             products={products}
        />}
        </div>
    );
}

export default Products;