从子组件 ReactJS 中的父组件访问功能

Question

我在App.jsx中有工作代码。 当它一起写在一个文件中时，一切正常。

const App = props => {
  const [cartProducts, setCartProducts] = useState([]);
  const [products, setProducts] = useState(getProducts());

  //const [searchValue, setSearchValue] = useState();

  const handleAddProductToCart = productID => {
    setCartProducts([...cartProducts, productID]);
  };
  const handleRemoveFromCart = productID => {
    const newCartProducts = cartProducts.filter(id => id !== productID);
    setCartProducts(newCartProducts);
  };

  /*const filterItems = ({ description, title }) => {
    return title.toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase())
      || description.toLocaleLowerCase().indexOf(searchValue.toLocaleLowerCase())
  }*/

  return (
    <>
    <Header/>
    <Search/>
    <Sidebar/>
    <div>
      {products.map(product => {
        const { id, title, description, image } = product;
        let haveInCart = false;

        cartProducts.forEach(productID => {
          if (productID === id) {
            haveInCart = true;
          }
        });

        return (
          <Card key={id} className="item-card">
            <CardImg src={image} alt={title} className="item-img" style={{ height: '260px' }} />
            <CardBody style={{ border: 'none' }} className="custom-card-body">
              <CardTitle style={{ border: 'none' }} className="custom-card-title">{title}</CardTitle>
              <CardText style={{ border: 'none' }} className="custom-card-text">{description}</CardText>
              <FontAwesomeIcon icon={faCartPlus} className="add-icon" onClick={() => handleAddProductToCart(id)} />
            </CardBody>
          </Card>
        );
      })}
      <h2>Your Cart</h2>
      {cartProducts.length > 0
        ? cartProducts.map(productID => {
          const productIndex = products.findIndex(product => {
            return product.id === productID;
          });
          let { id, title, image } = products[productIndex];
          return (
            <Card key={id} className="item-card">
              <CardImg src={image} alt={title} className="item-img" style={{ height: '260px' }} />
              <CardBody style={{ border: 'none' }} className="custom-card-body">
                <CardTitle style={{ border: 'none' }} className="custom-card-title">{title}</CardTitle>
                <FontAwesomeIcon icon={faTrash} className="remove-icon" onClick={() => handleRemoveFromCart(id)} />
              </CardBody>
            </Card>
          );
        })
        : "Yor Cart is Empty :("}
    </div>
    </>
  )
}

export default App;

我想将产品卡和购物车卡放入它自己的组件中。 当我这样做时，就像这样

const Product = ({product}) => {
    const { id, title, description, image } = product;
    return (
        <Card key={id} className="item-card">
            <CardImg src={image} alt={title} className="item-img" style={{ height: '260px' }} />
            <CardBody style={{ border: 'none' }} className="custom-card-body">
                <CardTitle style={{ border: 'none' }} className="custom-card-title">{title}</CardTitle>
                <CardText style={{ border: 'none' }} className="custom-card-text">{description}</CardText>
                <FontAwesomeIcon icon={faCartPlus} className="add-icon" /*onClick={() => handleAddProductToCart(id)}*/ />
            </CardBody>
        </Card>
    )
}

我的卡中没有产品的属性。 我想让我的代码更好地组织并保存它的功能。 如何从Product和Cart组件访问这些状态？

编辑这里是codesandbox https://codesandbox.io/s/late-cookies-r2inh?file=/src/App.jsx&fbclid=IwAR38tcE39tVL51YpG4_6A1HRz-kth1GSIocQWMPrU3QXepc5CHUNn-Zqi的链接

编辑 2如何让购物车中的商品显示在左侧的Product组件旁边？ 我应该为它创建整个购物车组件吗？

Answer 1

您的 Product.jsx 文件应如下所示：

import React from "react";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCartPlus } from "@fortawesome/free-solid-svg-icons";

import Card from "react-bootstrap/Card";
import CardBody from "react-bootstrap/Card";
import CardImg from "react-bootstrap/CardImg";
import CardTitle from "react-bootstrap/Card";
import CardText from "react-bootstrap/Card";

const Product = ({ product, handleAddProductToCart }) => {
  const { id, title, description, image } = product;
  return (
    <Card key={id} className="item-card">
      <CardImg
        src={image}
        alt={title}
        className="item-img"
        style={{ height: "260px" }}
      />
      <CardBody style={{ border: "none" }} className="custom-card-body">
        <CardTitle style={{ border: "none" }} className="custom-card-title">
          {title}
        </CardTitle>
        <CardText style={{ border: "none" }} className="custom-card-text">
          {description}
        </CardText>
        <FontAwesomeIcon
          icon={faCartPlus}
          className="add-icon"
          onClick={() => handleAddProductToCart(id)}
        />
      </CardBody>
    </Card>
  );
};

export default Product;

在您的 App.jsx 中，您可以像这样 map 产品数组：

    {products.map((product) => (
      <Product
        product={product}
        key={product.id}
        handleAddProductToCart={handleAddProductToCart}
      />
    ))}

编辑： https://codesandbox.io/s/determined-swartz-5q2fo我编辑了代码框，我让产品组件接受添加和删除产品回调以及“haveInCart”道具。 它将根据该道具决定使用哪个图标和哪个回调。 我不确定这个方法