我正在使用ReactJS开发SPA。我有一个根组件App,然后有几个子组件。在App组件中,我试图存储一些应用程序级别状态,例如登录用户ID和其他数据。但是我没有看到我的状态在子组件中传播。
应用
import menuCodes from './components/Codes';
class App extends React.Component<null, null> {
render() {
return (
<div className="App">
<Menu params = {asd.menuItems}/>
</div>
);
}
}
export default App;
子组件
import { Router, Route, Link, IndexRoute, browserHistory, hashHistory } from 'react-router';
import ParameterContainer from './components/parameter/parameter-container';
import NavMenu from './components/navigation/nav-menu';
import {Alert} from 'react-bootstrap';
import SelectFilter from './components/sample/sample-container';
// Main component and root component
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
userId: null,
roles: null,
parameterTypes: {
'STRING': 'STRING',
'BOOLEAN': 'BOOLEAN',
'INTEGER': 'INTEGER',
'DECIMAL': 'DECIMAL'
}
};
}
render() {
return (
<div>
<NavMenu />
<div className="container">
{this.props.children}
</div>
</div>
)
}
}
// page for 404
class NoMatch extends React.Component {
render() {
return (
<div className="container">
<Alert bsStyle="danger">
<h1>404: Not Found</h1>
<h3>The requested resource does not exist!</h3>
</Alert>
<img src="images/404.png" style={{display: 'block', margin: '0 auto', width: 300, height: '*'}} />
</div>
)
}
}
// render the application
ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="parameter" component={ParameterContainer} />
<Route path="sample" component={SelectFilter} />
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.getElementById('react'))
this.props不包含我的预期。我需要将数据传递给子组件。
答案 0 :(得分:0)
状态不会传播到子组件 - 您必须在子组件上设置道具以传递数据。您可以使用React.cloneElement
向子项添加属性:
let childrenWithProps = React.cloneElement({this.props.children, {
userid: this.state.userId,
...
});
最好的方法是使用Redux来管理应用程序数据并在Redux存储中存储应用程序级别状态。如果您不使用Redux,您也可以考虑使用react Context。根据文档,您可以使用上下文:
您想要通过组件树传递数据而不必 在每个级别手动传递道具
答案 1 :(得分:0)
要将state
或props
传递给子组件,您可以在Route
节点上显示它们
<Route path="parameter" component={ParameterContainer} parentState={this.state} />
然后,您可以在子组件中以props
constructor(props) {
super(props)
console.log('parentState:' + props.parentState);
}
以下是更好,更详细的答案:react-router - pass props to handler component