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

很难不知道ButtonLatest和DisplayLatest之间的关系。
如果他们都是同一个父代的后代（即，他们有一个共同的祖先），则该州可以生活在该共同的祖先中。（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>
);

如何将道具从功能按钮组件传递到另一个显示道具的功能组件？

1 个答案: