Javascript 将App.js的状态传递给子组件

我在一个网站的主页上工作，我希望主页有一个特定的导航/菜单栏，其他组件有一个不同的导航/菜单栏（主页隐藏“主页”按钮，其他组件显示）

目前我面临的问题是，呈现此菜单的逻辑存在于应用程序中，我很难找到正确的方法将我的应用程序组件的状态传递给其他组件，可能是因为缺乏经验

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import Main from "./main";
import MapContainer from "./mapcontainer";
import Venue from "./venue";
import Schedule from "./schedule";
import Accommodation from "./accommodation";
import Couple from "./couple";
import Honeymoon from "./honeymoon";
import Uploader from "./uploader";
import Friday from "./friday";
import Saturday from "./saturday"
import Sunday from "./sunday";
import Dresscode from "./dresscode";

export class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            error: false,
            isHome: true
        };        
    }

    componentDidMount() {
        console.log("App mounted");
    }


    render() {

        function HomeComponentMenu(props) {
            return (
                <nav className="header-on-app">
                    <button>Contact Us</button>
                    <button className="logout-btn"><a href="/logout">Logout</a></button>
                </nav>
            );
        }

        function AllOtherComponentsMenu(props) {
            return (
                <nav className="header-on-app">
                    <button><Link to="/">Home</Link></button>
                    <button>Contact Us</button>
                    <button className="logout-btn"><a href="/logout">Logout</a></button>
                </nav>
            );
        }

        const isHome = this.state.isHome;
        let menu;

        if (isHome) {
            menu = <HomeComponentMenu/>;
        } else {
            menu = <AllOtherComponentsMenu/>;
        }

        return (
            <BrowserRouter>

              <nav className="header-on-app">{menu}</nav>
                <div className="app-container">     
                    <Route exact path="/" component={Main} />
                    <Route exact path="/venue" component={Venue}/>
                    <Route exact path="/venuemap" component={MapContainer}/>
                    <Route exact path="/schedule" component={Schedule}/>
                    <Route exact path="/accommodation" component={Accommodation}/>
                    <Route exact path="/couple" component={Couple}/>
                    <Route exact path="/honeymoon" component={Honeymoon}/>
                    <Route exact path="/uploader" component={Uploader} />
                    <Route exact path="/friday" component={Friday} />
                    <Route exact path="/saturday" component={Saturday} />
                    <Route exact path="/sunday" component={Sunday} />
                    <Route exact path="/dresscode" component={Dresscode} />
                </div>
            </BrowserRouter>
        );
    }
}

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Link}；
从“/Main”导入Main；
从“/MapContainer”导入MapContainer；
从“/场馆”导入场馆；
从“/Schedule”导入计划；
从“/住宿”进口住宿；
从“/Couple”导入耦合；
从“/蜜月”导入蜜月；
从“/Uploader”导入上载程序；
从“/Friday”导入星期五；
从“/星期六”导入星期六
从“/Sunday”导入星期日；
从“/Dresscode”导入Dresscode；
导出类应用程序扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：false，
伊索姆：是的
};        
}
componentDidMount（）{
控制台日志（“安装的应用程序”）；
}
render（）{
功能HomeComponent菜单（道具）{
返回(
联系我们
);
}
功能分配组件菜单（道具）{
返回(
家
联系我们
);
}
const isHome=this.state.isHome；
让菜单；
如果（我很好）{
菜单=；
}否则{
菜单=
运输

特拉斯拉多

运输

);
}
}

---

因为我的组件是由React Router呈现的，所以我试图呈现在内联函数中传递它的道具，然后传递给我正在创建的参数，但不知何故它不起作用。您对如何解决这个问题有什么建议吗？非常感谢！

要将状态传递给子组件，您必须将其作为道具传递子组件的

e、 g

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“./TableView”导入TableView
导出默认类应用程序扩展组件{
状态={
项目：'这是项目'
}
render（）{
返回(
)
}
}

在子组件中获取道具的步骤

import React, { Component } from 'react'

export default class TableView extends Component {
  render(){
    <React.Fragment>
      {this.props.item}
    </React.Fragment>
  }
}

import React，{Component}来自“React”
导出默认类TableView扩展组件{
render（）{
{this.props.item}
}
}

希望能有帮助

编辑：

---

如果您的浏览器中有react-devtools插件，检查每个组件的状态值是否将道具传递给react-route，则调试也会有所帮助，您必须在渲染函数中定义它，如下所示：

import React, { Component } from 'react'

export default class TableView extends Component {
  render(){
    <React.Fragment>
      {this.props.item}
    </React.Fragment>
  }
}

}/>

要更改父级上的iHome状态，可以在父级上定义该函数，如：

updateHomeState = (newState) => { 
    this.setState({ isHome: newState }) 
} 

---

然后在子组件的

componentDidMount（）

中调用它，比如

this.props.updateHomeState（newState）

多谢各位！一开始效果不错。主页上有我想要的导航栏，当我进入场馆页面时，我可以看到包含“主页”按钮的新导航栏。唯一的问题是，当我点击按钮，我被重定向回主页，导航栏被更新，“主页”按钮又回到了那里。我现在要看一看，并尝试改变行为，但非常感谢！不客气：）我更新了我的答案，以展示如何将相同的函数传递给不同的组件，并让它们以不同的方式影响

iHome

状态。您可以用同样的方式将其传递到

主组件

中，并用

真

调用它，而不是像在子组件中那样调用

假

。再次感谢您，@Lazarus！我相信你的解决方案会很有帮助！

updateHomeState = (newState) => { 
    this.setState({ isHome: newState }) 
}