Reactjs 如何在React.js菜单组件的基础上更改Home组件中的数据

我有三个组件，即应用程序、主页和菜单。应用程序是主菜单和菜单的父级。主菜单和菜单是兄弟姐妹

菜单组件有一些按钮，当用户点击这些按钮时，我想更改主组件的状态数据。如何在React.js中实现这一点

App.js

function App() {
    const [isMenu, setIsMenu] = useState(false);
    let history = useHistory();
    const changeIsMenu = () => {
        setIsMenu(true);
    }

    return (
        <div>
            <div>
                <Header id="myHeader"></Header>
            </div>
            <div className="content">
                <Provider store={store}>
                    <div className="menu-other">
                    <Router>
                        {isMenu && <Menu></Menu>}
                        <Switch>
                            <Route exact path="/"
                                render={(props) => <Login history={history} 
                                 changeIsMenu={changeIsMenu} {...props} />}
                            />
                            <Route exact path="/signup"
                                render={(props) => <Signup history={history} 
                                 changeIsMenu={changeIsMenu} {...props} />}
                            />
                           <Route exact path="/home" component={Home}> 
                           </Route>
                           <Route exact path="/create" component={Create}> 
                           </Route>
                           <Route exact path="/about" component={About}> 
                           </Route>
                        </Switch>
                    </Router>
                 </div>
              </Provider>
         </div>
    </div>
  );
}

Home.js

class Home extends React.Component {

constructor(props) {
    super(props);
    console.log("in constructor props =", this.props.mainData);
    this.state = {
        data: null,
        isFetch: false,
        clickEvent: false
    }
    this.allDataShow = this.allDataShow.bind(this);
    this.upcomingShow =  this.upcomingShow.bind(this);
}

allDataShow(){
    allData(this.props.mainData);
}

upcomingShow(){
    upcoming(this.props.mainData);
}


//I want to call this function from Menu component which is responsible to 
//change the state data of Home Component 
changeData(option) {
    console.log("I'm home changeData");
    switch (option) {
        case "All":
            console.log("All");
            this.allDataShow();
            break;

        case "Upcoming":
            console.log("Upcoming");
            this.upcomingShow();
            break;

        case "Today":
            console.log("Today");
            todayData();
            break;

        case "Next 7 days":
            console.log("Next 7 days");
            next7Days();
            break;

        case "GoTo Date":
            console.log("GoTo Date");
            gotoDate();
            break;

        case "Search":
            console.log("Search");
            search();
            break;

        case "Filter":
            console.log("Filter");
            break;

        case "Notify me":
            console.log("Notify me");
            break;

        default:
            console.log("default is here");
    }

}
render(){
    //here I display the state of Home Component
}
}

---

这是代码。我想从Menu component调用Home component的showData函数，该函数负责更改Home component的状态数据。

您正在向render方法中的两个组件发送

changeismmen

道具，因此您现在唯一需要的是使用其道具在组件中使用此函数：

changeShow(option,event)
{

  //I want to call a function of Home Component here
  this.props.changeIsMenu()

}

---

不要像其他很多东西一样使用示例，因此使用基本

代码

非常简单。请注意，我在示例中使用了

功能组件

。您可以在基于类的组件中执行相同的操作

解释：我将

标志传递给主组件，将
设置标志传递给菜单组件。在菜单组件中调用
setFlag
上的按钮，单击t

App.js

const BasicExample = () => {
  const [flag, setFlag] = useState(false);

  return (
    <Router>
      <div>
        <Menu setFlag={value => setFlag(value)} />

        <hr />
        <Route
          exact
          path="/"
          render={props => <Home flag={flag} {...props} />}
        />
      </div>
    </Router>
  );
};

const Menu = ({ setFlag }) => (
  <div>
    <h2>Menu</h2>
    <input type="button" value="Click" onClick={() => setFlag(true)} />
  </div>
);

export default Menu;

const Home = ({ flag }) => (
  <div>
    <h2>Home</h2>
    {flag ? "Menu button is clicked" : "Menu button is not clicked"}
  </div>
);

export default Home;

const BasicExample=（）=>{
const[flag，setFlag]=使用状态（false）；
返回(
setFlag（值）}/>

}
/>
);
};

Menu.js

const BasicExample = () => {
  const [flag, setFlag] = useState(false);

  return (
    <Router>
      <div>
        <Menu setFlag={value => setFlag(value)} />

        <hr />
        <Route
          exact
          path="/"
          render={props => <Home flag={flag} {...props} />}
        />
      </div>
    </Router>
  );
};

const Menu = ({ setFlag }) => (
  <div>
    <h2>Menu</h2>
    <input type="button" value="Click" onClick={() => setFlag(true)} />
  </div>
);

export default Menu;

const Home = ({ flag }) => (
  <div>
    <h2>Home</h2>
    {flag ? "Menu button is clicked" : "Menu button is not clicked"}
  </div>
);

export default Home;

const菜单=（{setFlag}）=>(
菜单
setFlag（真）}/>
);
导出默认菜单；

Home.js

const BasicExample = () => {
  const [flag, setFlag] = useState(false);

  return (
    <Router>
      <div>
        <Menu setFlag={value => setFlag(value)} />

        <hr />
        <Route
          exact
          path="/"
          render={props => <Home flag={flag} {...props} />}
        />
      </div>
    </Router>
  );
};

const Menu = ({ setFlag }) => (
  <div>
    <h2>Menu</h2>
    <input type="button" value="Click" onClick={() => setFlag(true)} />
  </div>
);

export default Menu;

const Home = ({ flag }) => (
  <div>
    <h2>Home</h2>
    {flag ? "Menu button is clicked" : "Menu button is not clicked"}
  </div>
);

export default Home;

const Home=（{flag}）=>(
家
{flag？“单击菜单按钮”：“未单击菜单按钮”}
);
导出默认主页；
您需要将状态存储在
应用程序中。将道具中的值传递到
主页
，并将回调函数作为道具传递到
菜单
。阅读上面的文档。将应用程序组件中的状态变量设置为isMenuButtonClicked=false，并将此标志传递给主组件2。现在在应用程序组件中创建一个函数，并将其传递给菜单组件3。单击按钮时在菜单组件中调用此函数4。在此函数中，执行将isMenuButtonClicked更改为true的代码。5.通过这种方式，您可以知道菜单按钮已被单击，并且可以相应地在主组件中执行更改。顺便说一句，理想的解决方案是在这里使用Redux，但这是一个你需要学习的大故事。要么在应用程序组件上初始化状态并将其作为道具传递到主菜单，要么使用状态管理库。Rajat，我已经提供了答案。请看，这可能对你有帮助。