在反应中传递价值

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

在 parent 组件中定义计数器状态，然后将计数器和 setCounter 作为属性传递给 child。使用 setCounter 更新计数器，它也会在 parent 组件中更新。

Child:

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;

Parent:

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;

Answer 2

如果您需要 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，但根据问题，我认为您只需要向下传递一个级别。

在反应中传递价值

Passing value up in react

javascript

parent

reactjs