如何从 ReactJS 中的另一个组件传递 useState 挂钩的值？

Question

I have two components:

Parent.js

import { useState } from "react";

function Parent() {
    const [showHideContent, setShowHideContent] = useState("none");

    return (
        <div style={{ display: showHideContent }}>
            Some content here...
        </div>
    );
}

Child.js

function Child() {
    return (
        <button>
            Show/Hide Content
        </button>
    );
}

I want to pass two values none and block (one value at a time) through setShowHideContent of Parent component using Show/Hide Content button of Child component .

How to do this?

NOTE: These two components are saved in the same folder but in two different files.

These two component are rendered by App.js .

<Route path="/content">
    <Menu /> {/* rendering in LEFT */}
    <div className="content-flexbox">
        <Parent /> {/* rendering in CENTER */}
        <Child /> {/* rendering in RIGHT */}
    </div>
    <Footer /> {/* rendering in BOTTOM */}
</Route>

Answer 1

It seems like you want the Child component to simply toggle the display value of some content in the Parent component.

As you've defined them though they are not parent-child, but rather they are siblings. As such if they need to share state/behavior, then the solution is to lift state up to a common ancestor, App in this case.

<Route path="/content">
  <Menu />
  <div className="content-flexbox">
    <Parent /> // <-- siblings
    <Child />  // <-- siblings
  </div>
  <Footer />
</Route>

See: Lifting State Up

Move the showHideContent state and updater into the parent App component, pass down the showHideContent state to Parent and the toggleVisibility callback to the Child .

function Parent({ showHideContent }) {
  return <div style={{ display: showHideContent }}>Some content here...</div>;
}

function Child({ onClick }) {
  return (
    <button type="button" onClick={onClick}>
      Show/Hide Content
    </button>
  );
}

export default function App() {
  const [showHideContent, setShowHideContent] = React.useState("none");

  const toggleVisibility = () =>
    setShowHideContent((value) => (value === "none" ? "block" : "none"));

  return (
    ...
    <Route path="/content">
      <Menu />
      <div className="content-flexbox">
        <Parent showHideContent={showHideContent} />
        <Child onClick={toggleVisibility} />
      </div>
      <Footer />
    </Route>
    ...
  );
}

Answer 2

You can simply pass values as prop to child component. Call your child component inside parent component and pass value

import { useState } from "react";
import Child from "//your path";

function Parent() {
const [showHideContent, setShowHideContent] = useState("none");

return (

    <div style={{ display: showHideContent }}>
       <Child showHide={showHideContent}/>
    </div>
);

} Now in your child component

function Child({showHide}) {
return (
    <button>
        {showHide}
        Show/Hide Content
    </button>
);
}

Answer 3

Include your Child component in your Parent component and pass hooks as props

import { useState } from "react";
// import the child component
function Parent() {
    const [showHideContent, setShowHideContent] = useState("none");
    return (
        <div style={{ display: showHideContent }}>
            Some content here...
            <Child showHideContent={showHideContent}/>
        </div>
    );
}

And use them in your child components

function Child({showHideContent}) {
    return (
        <button>
{showHideContent}
            Show/Hide Content
        </button>
    );
}

Another way of doing the same is by using Context API:

https://reactjs.org/docs/hooks-reference.html#usecontext

Answer 4

1. You can pass an inline function as prop from parent to child like this.

function Parent(){
   const [showHideContent, setShowHideContent] = useState("none");
   return (
    <Child onButtonClicked={(toValue) => setShowHideContent(toValue)} />
   )
}


function Child({ onButtonClicked }) {
    return (
        <button onClick={onButtonClicked} >
            Show/Hide Content
        </button>
    );
}

2. Pass down exact state modifier with same name

function Parent(){
   const [showHideContent, setShowHideContent] = useState("none");
   return (
    <Child setShowHideContent={setShowHideContent} />
   )
}

//or with prop speading
function Parent(){
   const [showHideContent, setShowHideContent] = useState("none");
   return (
    <Child {...{setShowHideContent}} />
   )
}