如何在 React.js 中將 useState 值從一個組件傳遞到另一個組件

Question

在這里快速幫助！ 我的反應項目中有VendorDetailsBrief.js和VendorsList.js組件。 在VendorDetailsBrief.js 中，我有一個clickedAsset state，當它被點擊時會改變它的值。 我希望將此 state 值傳遞給VendorsList.js組件。

這是代碼。

VendorDetailsBrief.js

import React, { useState, useEffect } from "react";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import axios from "axios";
import "./ModalVendors.css";
import VendersDetail from "./VendorsDetail";
import { Link } from "react-router-dom";
const VendorDetailsBrief = ({ setOpenModalVendors }) => {
  const [data, setData] = useState({});
  const [clickedAsset, setClickedAsset] = useState("");
  const [hide, setHide] = useState(false);

  const baseURL =
    "http://127.0.0.1:8000/api/business_process/business-impact/vendor-product-detail";

  useEffect(() => {
    axios
      .get(baseURL)
      .then((response) => {
        setData(response.data);
      })
      .then(
        (response) => {},
        (err) => {
          alert("No Data To Show");
        }
      )
      .catch((err) => {
        return false;
      });
  }, []);
  const DisplayData = data.vendor_product?.map((vendor) => {
    return (
      <tr>
        <td>{vendor.vendor}</td>
        <td onClick={() => setClickedAsset(vendor.cpe)}>
          <Link to="/vendor_details">{vendor.product}</Link>
        </td>
      </tr>
    );
  });
  return (
    <div className="modalBackgroundVendors">
      <div className="modalContainerVendors">
        <div className="titleCloseBtnVendors">
          <button
            onClick={() => {
              setOpenModalVendors(false);
            }}
          >
            X
          </button>
        </div>
        <div className="z-100">
          <div className="text-black">
            <div className="rounded overflow-hidden flex  justify-center items-center">
              <table class="GeneratedTable">
                <thead>
                  <tr>
                    <th>Vendor</th>
                    <th>Product</th>
                  </tr>
                </thead>
                <tbody>{DisplayData}</tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VendorDetailsBrief;

VendorsList.js

import React from "react";

const VendorsList = () => {
  return <div></div>;
};

export default VendorsList;

我怎樣才能做到這一點？ 我需要你的幫助

Answer 1

如果 VendorsList.js 是 VendorDetailsBrief.js 的父級，您可以使用提升 state