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

Question

我有三个组件，即应用程序、主页和菜单。App 是 Home 和 Menu 的父级。Home 和 Menu 是同级的。

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

应用程序.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>
  );
}

菜单.js

class Menu extends React.Component
{
    constructor(props)
    {
        super(props);
        this.changeShow=this.changeShow.bind(this);
    }

    changeShow(option,event)
    {
        //I want to call a function of Home Component here
    }

    render(){
        //here I capture the event and call the changeShow() function
    }
}

主页.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 组件中调用 Home 组件的 showData 函数，该函数负责更改 Home 组件的状态数据。

标签： reactjs

Answer 1

您正在向changeIsMenurender 方法中的两个组件发送一个道具，所以您现在唯一需要的是使用它的道具在您的组件中使用这个函数：

changeShow(option,event)
{

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

}