react中想在Provider这一层的外层在包裹一层,然后向子组件传递props,该怎么办?

发布于 2022-09-04 14:24:46 字数 1385 浏览 19 评论 0

是这样的,因为项目需要前端国际化,现在的项目中代码是这样的

代码中使用了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的传递过程。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

|煩躁 2022-09-11 14:24:46

你可以用createElement这个方法来试试。
http://www.onmpw.com/tm/xwzj/...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文