react antd Modal.success里面不能使用 react-intl FormattedMessage组件

Question

报错如下：could ont find required "Intl" object <Intlprovider> needs to exise in the component ancestrg
要做国际化，在react antd的Modal.success，title和content里面写的代码：

 Modal.success({
    title:<FormattedMessage id="app"  defaultMessage="app"/>,
    content:<FormattedMessage id="myAPP"  defaultMessage="myAPP"/> ,
    onOk() {},
  });

居然报错？

在其它组件里面就好着?
唯独在Modal.success里面的title和content里面写<FormattedMessage/>报错？

有高手遇到过这个问题么？

求指导？谢谢！

Answer 1

我也很好奇, 看了看 antd 的 confirm 的源码,

## confim.tsx
....
export default function confirm(config) {
  ...
  let div = document.createElement('div');
  document.body.appendChild(div);


  ReactDOM.render(
    <Dialog
        ...{其他 props}
    >
      <div className={`${prefixCls}-body-wrapper`}>
        {body} {footer}
      </div>
    </Dialog>
  , div);
...

相当于重新创建了一个应用,放置遮罩层.和弹出的内容.
也就是说原先的 context 都会丢失.

给你提供个方法参考下:
react-intl 不仅提供了 Component 方式调用,也提供 API 的方式调用 https://github.com/yahoo/reac...

import { injectIntl, intlShape } from 'react-intl';
export default class MyComponent extends Component {
  static propTypes = {
    intl: intlShape.isRequired,
  }
  render () {
      const { intl: { formatMessage } } = this.props
      const title = formatMessage({id:'app'});
      const content = formatMessage({id:'Myapp'});
      // formatMessage() => string
      
      return (
          <div>
           ....
          </div>
       );
}

export default injectIntl(MyComponent);