從孩子到父母獲取 state

Question

我將如何從孩子那里獲得 state 以便父母從孩子那里識別出 state 已經改變？

const grandParent = () => (
 <parent>
   <child/>
 </parent>
);

const child = () => {
 const [isOpen, setOpen] = useState(false)

  return (
    <button onClick={()=>setOpen(!isOpen)}>Open</button>
 )};

Answer 1

const grandParent = () => {
   const [ isOpen, setOpen ] = useState(false)

   return (
      <parent>
         <child onHandlerClick={ () => setOpen(!isOpen) }/>
      </parent>
   );
};

const child = (onHandlerClick) => {
    // Note I removed the local state. If you need the state of the parent in the child you can pass it as props. 

  return (
    <button onClick={ () => onHandlerClick() }>Open</button>
   );
};

當您需要將 state 保留在父級中並在子級內部對其進行修改時，無論子級 state。 您從定義為修改 state 的父項的 props 中傳遞一個處理程序。 子執行此處理程序。

這種模式稱為 state 吊裝。

Answer 2

我想我會做這樣的事情：

function GrandParent(){
  return <Parent />
}

function Parent() {
  const [isOpen, setOpen] = useState(false);

  const handleToggle = useCallback(() => {
    setOpen(!isOpen);
  }, [isOpen, setOpen]);


  return <Child handleToggle={handleToggle} />;
}

function Child(props) {

  return <button onClick={() => props.handleToggle()}>Open</button>;
}

Answer 3

您可以使用功能組件執行以下操作。 編寫子組件如下：

import React, {useEffect, useState} from 'react';

function Child(props) {
    const {setStatus} = props;
    const [isOpen, setOpen] = useState(false);

    function clickHandler() {
        setOpen(!isOpen);
        setStatus(`changes is ${!isOpen}`);
    }
    return (
        <div>
            <button onClick={clickHandler}>Open</button>
        </div>
    );
}
export default Child;

編寫 GrandParent 組件如下：

import React, {useEffect, useState} from 'react';
import Child from "./Child";

function GrandParent(props) {
    function setStatus(status) {
        console.log(status);
    }
    return (
        <div>
            <Child setStatus={setStatus}></Child>
        </div>
    );
}
export default GrandParent;

在 App.js 中使用 GrandParent 組件如下：

import React from "react";
import GrandParent from "./GrandParent";

class App extends React.Component {
  render() {
    return (
        <GrandParent/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

export default App;

Answer 4

每次更改 state 時，您都可以向孩子添加道具並調用 onChange

const grandParent = () => (
function handleChange() {}
   <parent>
      <child onChange={handleChange} />
   </parent>
);


const child = (props) => {
   const [isOpen, setOpen] = useState(false);
   function onChange() {
     setOpen(prevOpen => {
        props.onChange(!prevOpen);
        return !prevOpen;
     });
   }
   return (
      <button onClick={()=>setOpen(!isOpen)}>Open</button>
   )};

Answer 5

你可以這樣做：

const grandParent = () => {
    const [isOpen, setOpen] = useState(false)
    return (
        <parent isOpen>
            <child isOpen onChangeState={() => setOpen(!isOpen)} />
        </parent>
    )
}

const child = (props) => {
    return (
        <button
            onClick={() => {
                props.onChangeState()
            }}>
            Open
        </button>
    )
}

解釋：

您在grandParent組件中管理 state 並將其傳遞給parent組件（如果需要，也可以傳遞給child組件）。

child有一個道具，當單擊按鈕時會調用該道具並導致grandParent的更新