在反應中的兩個功能子組件之間傳遞道具/狀態？

Question

我一直在谷歌上尋找很多關於如何在功能組件之間傳遞道具的信息，但似乎很少有信息（或者我不知道要輸入谷歌的關鍵字）。

我不需要 redux 或全局存儲的數據，我只想將存儲在掛鈎中的 JSON object 從一個組件文件傳遞到另一個組件文件。

我有三個文件，一個是父文件，另外兩個是子文件，我想在子文件之間傳遞數據。

家長

import React, { useState } from "react";
import ShoppingPageOne from "./ShoppingPageOne";
import ShoppingPageTwo from "./ShoppingPageSecond";

function ShoppingPageContainer() {

  const [pageone_Open, setPageone_Open] = useState(true);
  const [pagetwo_Open, setPagetwo_Open] = useState(false);


  const page_showHandler = () => {
    setPageone_Open(!pageone_Open);
    setPagetwo_Open(!pagetwo_Open);
  };

  return (
    <div className="Shopping_Container">
      <div className="Shopping_Box">
        <h2>Online food shop</h2>
        <div className="Shopping_Page_Container">
          <ShoppingPageOne showOne={pageone_Open} next_ClickHandler={page_showHandler} />
          <ShoppingPageTwo showTwo={pagetwo_Open} Reset_Data={page_showHandler} />
        </div>
      </div>
    </div>
  );
}

export default ShoppingPageContainer;

孩子一：

import React, { useState, useEffect } from "react";
import Data from '../shoppingData/Ingredients';

const ShoppingPageOne = (props) => {

  //element displays
  const [pageone_show, setPageone_show] = useState("pageOne");

  //stores quantities of items as JSON objects
  const [Quantities, setQuantities] = useState({});
  const [QuantiesProps, setQuantitiesProps] = useState(null)


  useEffect(() => {
    //sets info text using Json
    if (props.showOne) {
      setPageone_show("pageOne");
    } else {
      setPageone_show("pageOne hide");
    }
  }, [props.showOne]);


  return (
    <div className={"Shopping_Content " + pageone_show}>
      {Data.map((Ingredients) => {

        //updates Quanties Hook
        const handleChange = (event) => {

          setQuantities({
            ...Quantities,
            [Ingredients.Name]: {
              ...(Quantities[Ingredients.Name] ?? {}),
              quantities: event.target.value
            }
          });
        };

        return (<div className="Shopping_input" key={Ingredients.Name}>
          <p>{Ingredients.Name} £{Ingredients.Price}</p>
          <input onChange={handleChange.bind(this)} min="0" type="number"></input>
        </div>)
      })}
      <div className="Shopping_Buttons">
        <p onClick={props.next_ClickHandler}>Buy Now!</p>
      </div>

    </div>
  );
};

export default ShoppingPageOne;

孩子二

import React, { useState, useEffect } from "react";
import Data from '../shoppingData/Ingredients';

const ShoppingPageSecond = (props) => {
  //element displays
  const [pagetwo_show, setPagetwo_show] = useState("pageTwo hide");

  useEffect(() => {
    //resets info text
    if (props.showTwo) {
      setPagetwo_show("pageTwo");
    } else {
      setPagetwo_show("pageTwo hide");
    }


  }, [props.showTwo]);




  return (
    <div className={"Shopping_Content " + pagetwo_show}>

      <div className="Shopping_Buttons">
        <p onClick={props.Reset_Data}>Shop Again</p>
      </div>

    </div>
  );
};

export default ShoppingPageSecond;import React, { useState, useEffect } from "react";
import Data from '../shoppingData/Ingredients';

const ShoppingPageSecond = (props) => {
  //element displays
  const [pagetwo_show, setPagetwo_show] = useState("pageTwo hide");

  useEffect(() => {
    //resets info text
    if (props.showTwo) {
      setPagetwo_show("pageTwo");
    } else {
      setPagetwo_show("pageTwo hide");
    }


  }, [props.showTwo]);




  return (
    <div className={"Shopping_Content " + pagetwo_show}>

      <div className="Shopping_Buttons">
        <p onClick={props.Reset_Data}>Shop Again</p>
      </div>

    </div>
  );
};

export default ShoppingPageSecond;

我只是想在“立即購買”時將包含在數量掛鈎中的 state 從孩子一傳遞給孩子二。 按鈕被點擊？ 這樣做的最佳方法是什么？

Answer 1

據我了解，我不會在同一父母下的兩個孩子之間傳遞道具。 相反，父母持有數據，並將數據和變異 function 作為道具傳遞給孩子。

import React, { useState } from 'react';

const PageOne = ({ value, setValue }) => {
   const PageOneFunction = () => {
      setValue({
         pageOneData: value.pageOneData + 1,
         pageTwoData: value.pageTwoData + 1,
      });
   };

   return (
      <div>
         <h4>Page One</h4>
         <div>{value.pageOneData}</div>
         <button onClick={PageOneFunction}>
            Increase page one and page two value
         </button>
      </div>
   );
};

const PageTwo = ({ value, setValue }) => {
   const pageTwoFunction = () => {
      setValue({
         pageOneData: 0,
         pageTwoData: 0,
      });
   };

   return (
      <div>
         <h4>Page Two</h4>
         <div>{value.pageTwoData}</div>
         <button onClick={pageTwoFunction}>Reset</button>
      </div>
   );
};

const PageContainer = () => {
   const [data, setData] = useState({
      pageOneData: 0,
      pageTwoData: 0,
   });

   return (
      <div className="bg-white">
         <PageOne value={data} setValue={setData} />
         <PageTwo value={data} setValue={setData} />
      </div>
   );
};

export default PageContainer;