是这样的,因为项目需要前端国际化,现在的项目中代码是这样的
代码中使用了redux
作为最外层,然后里面包裹了路由react-router
class Root extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Provider store={store}>
<div>
<AppRouter store={store} />
</div>
</Provider>
)
}
}
现在想要使用前端国际化的库,需要引用react-intl
,这个库需要在最外面包裹一层,也就是需要写成这样
class Root extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<IntlProvider locale={this.state.language_local} messages={messages[this.state.language_messages]}>
<Provider store={store}>
<div>
<AppRouter store={store} />
</div>
</Provider>
</IntlProvider>
)
}
}
但是现在,这里出现了问题,现在我想要在view的根组件中控制控制改变IntlProvider中的props(local和messages)属性配置,我想了一种方式是通过父组件向子组件传递一个可以改变父组件state的方法,然后再子组件中调用这个方法,动态改变Root组件的props,这样就可以实现页面上选择语言后,页面语言显示改变。
但是我不知道该怎么样向子组件传递这个方法,诚心求赐教
我还想了一个方法,不知道行不行,还没试验过,就是把IntlProvider
这个组件写在视图层里,就是写在Provider的里面,最外层视图组件layout里面,这样就跳过了redux和router的传递过程。
你可以用createElement这个方法来试试。
http://www.onmpw.com/tm/xwzj/...