React - 從另一個子組件更改子組件中的狀態

Question

當在另一個子組件中單擊按鈕時，我需要更改一個子組件中的狀態。 兩個孩子都有相同的父組件。

import React from "react":
import A from "...";
import B from "...";

class App extends React.Component {
    render() {
        <div>
            <A />
            <B /> 
        </div>
    }
}

在這個例子中，當組件 A 中的按鈕被按下時，組件 B 中的狀態需要改變。

Answer 1

這個應用程序聽起來像是“提升狀態”的完美用例，即在父組件中保持主狀態。 然后，您基本上只需將處理程序（以更改父狀態）傳遞給組件 A（這將成為按鈕的 onClick 處理程序），然后將您想要顯示的狀態傳遞給組件 B。

當你點擊按鈕時，setState 在父組件中被調用，它會自動重新渲染所有 props 改變的子組件（包括組件 B）。

這里有更詳細的信息： https : //reactjs.org/docs/lifting-state-up.html

編輯：下面的回復提醒我，我可能應該添加一些代碼來說明 - 但我做了一些簡化事情的更改。

import React, {useState} from "react":
import A from "...";
import B from "...";

const App = () => {
    const [show, setShow] = useState(false);

    function handleToggle() {
      // Decouple the implementation of the parent state change from the child
      // Pass a function to change the state (async/batching reasons)
      setShow(show => !show);
    }

    return (
        <div>
            <A show={show} onToggle={handleToggle} />
            <B show={show} onToggle={handleToggle} /> 
        </div>
    )
}

const A = ({show, onToggle}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={onToggle}>
      toggle
    </button>
  </div>
)

const B = ({show, onToggle}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={onToggle}>
      toggle
    </button>
  </div>
)

所以基本上我們不關心父級中的狀態如何改變。 我們只知道當子組件中的按鈕被點擊時，我們想要觸發那個變化。 所以我們真正要做的就是調用通過 props 傳遞下來的函數——我們不必傳遞任何參數。

然后，父級將處理handleToggle函數內的任何點擊，您可以在將來更改此實現，而子級則一無所知。 也許您想更改為使用 mobx 來處理狀態，或者在最終更改狀態之前運行一些其他代碼。 既然兩者都解耦了，你們都很好！ 我還調整了setShow以使用函數（此處描述的好處： https : setShow ）。

Answer 2

對上述答案的補充：

import React, {useState} from "react":
import A from "...";
import B from "...";

const App = () => {
    const [show, setShow] = useState(false)
    return (
        <div>
            <A show={show} setShow={setShow} />
            <B show={show} setShow={setShow} /> 
        </div>
    )
}

const A = ({show, setShow}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={() => setShow(!show)}>
      toggle
    </button>
  </div>
)

const B = ({show, setShow}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={() => setShow(!show)}>
      toggle
    </button>
  </div>
)