antdesign的modal组件无法访问IntlProvider,如何解决?

问题描述

我正在用dva,antdesign和react-intl框架开发一个单页应用程序,并且使用react-intl实现国际化。我在最外层的index.js用 <IntlProvider>将所有的组件都包裹起来,这样所有的子组件都能访问到intl对象。

问题出现的环境背景及自己尝试过哪些方法

绝大部分页面和组件都工作正常,但是antdesign的Modal所显示的内容,用react-intl的<FormattedMessage id="message.id"/>之后报错,错误信息是:[React Intl] Could not find required intl object. <IntlProvider> needs to exist in the component ancestry.

我通过Chrome的React插件观察了组件的结构,出现此问题的原因是Model组件是写在最外面(和App平级的)的这样就不是<IntlProvider>的子组件了。
https://img2.mukewang.com/5bcfe4bc0001c10c06010055.jpg

我不想在每个用到Modal的组件或者页面里再次写一遍<IntlProvider>,请问有什么好的解决办法?


米琪卡哇伊
浏览 2090回答 1
1回答

杨__羊羊

谢谢&nbsp;@厦冰&nbsp;。我在github上也问了,得到的答案是可以用injectIntl把我的那个Component封装一下,然后调用intl.formatMessage() API。我试了可以工作,原因应该是<FormattedMessage>是在Modal render的时候才求值的,但是调用formatMessage() API的话这个在component 执行的时候就已经求值了.
打开App,查看更多内容
随时随地看视频慕课网APP