如何在路由（react-route-dom）reactjs中将状态从父组件传递到子组件

我是React.js新手，并使用

React路由器dom

创建了一个小型React应用程序。其中我有两个部分：

Dashboard（Dashboard.js）

信息（Information.js）

还有一个主要组件App.js，我在其中使用了

react路由器dom

<Route exact path="/dashboard" render={props => <Dashboard someProp="2" {...props} />} />
<Route exact path="/information" render={props => <Information someProp="2" {...props} />} />

}/>
} />

---

我能够将道具从应用程序组件发送到仪表板和信息，但我想发送状态。有人能帮我吗，我如何将状态从父组件发送到子组件？

在父组件中，您可以发送这样的道具

<child prop1 = {this.state.stateName} />

---

使用上述答案，我发布了完整的代码，以便更多用户能够理解这一点

App.js文件

class App extends React.Component {
constructor(props) {
    super(props);
    this.state = {open: false};
    this.state = {message: "StackOverflow"};
  }

return (
        <Router>
          <div>
          <AppBar title="App" onLeftIconButtonTouchTap={this.handleToggle} />

            <Drawer containerStyle={{height: 'calc(100% - 64px)', top: 64}} docked={true} width={200} open={this.state.open} zDepth={2}>
              <Link to="/dashboard" style={{ textDecoration: 'none' }}><MenuItem>Dashboard</MenuItem></Link>
              <Link to="/information" style={{ textDecoration: 'none' }}><MenuItem>Information</MenuItem></Link>
            </Drawer>

            <Route exact path="/dashboard" render={props => <Dashboard someProp={this.state.message} {...props} />} />
            <Route exact path="/information" render={props => <Information someProp={this.state.message} {...props} />} />
          </div>
        </Router>
    );
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={open:false}；
this.state={message:“StackOverflow”}；
}
返回(
仪表板
信息
} />
} />
);
}

Dashboard.js

import React from 'react';


class Dashboard extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    console.log(this.props);
    const {styleFromProps} = this.props;
    const contentStyle = {  ...styleFromProps, transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)' };

    return (
            <div style={contentStyle}><h1> Hello {this.props.someProp}</h1></div>
    );
  }
}

export default Dashboard;

从“React”导入React；
类Dashboard扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
console.log（this.props）；
const{styleFromProps}=this.props；
constContentStyle={…styleFromProps，transition:'marginleft450ms立方贝塞尔（0.23,1,0.32,1）'}；
返回(
你好{这个。道具。一些道具}
);
}
}
导出默认仪表板；

Great}/>如果有效，您可以接受我的答案，这样，如果您将此答案标记为已接受，未来用户可以从该问题中获得帮助。