如何將道具從功能按鈕組件傳遞到另一個顯示道具的功能組件？

Question

我正在嘗試創建一個功能組件按鈕組件，該組件在單擊后更改狀態，並根據單擊/未單擊 - 將呈現另一個組件（內容）。 我如何通過傳遞道具來實現這一點？ 我在 Button.jsx 中得到一個 setState 不是函數。

        function App() {
      return (
        <div>
          <Parent />
        </div>
      );
    }
    export default App;


            import React, { useState } from 'react';
        import { Content } from './Content';
        import { Button } from './Button';
        export const Parent = () => {
            const [state, setState] = useState(false);

            return (
                <div>
                    <Button state={state} setStat={setState} />
                    {state && <Content />}
                </div>
            );
        };



            export const Button = ({ state, setState }) => {
            const handler = () => setState(!state);
            return (
                <div>
                    <button onClick={handler}>{state ? 'Clicked' : 'Click me'}</button>
                </div>
            );
        };



            export const Content = () => {
            return <div>Show this when button is clicked and Parent state is true</div>;
        };

Answer 1

1. 如果不知道ButtonLatest和DisplayLatest之間的關系，就很難判斷。

2. 如果他們都是同一個父母的后代（即他們有一個共同的祖先），那么那個狀態就可以存在於那個共同的祖先中。 （ setState函數可以作為道具傳遞給ButtonLatest 。

有幾種方法可以做你想做的事，但這取決於他們的關系； Codepen 在這里會有所幫助。

const CommonParent = () => {
   const [isSelected, setIsSelected] = useState(false)
   
   return <div>
             { isSelected && <DisplayLatest /> }
             <ButtonLatest 
                 isSelected={isSelected} 
                 setIsSelected={setIsSelected}
              />
          </div>
   }

const ButtonLatest = ({setIsSelected, isSelected}) => {

    return (
        <div>
            <button onClick={ () => setIsSelected(!isSelected) }>
               { isSelected ? 'Clicked' : 'Click me'}
            </button>
        </div>
);