What if the modal component of antdesign cannot access IntlProvider,?

problem description

I"m developing a single-page application using the dva,antdesign and react-intl frameworks, and internationalizing using react-intl. I wrap all the components in the outermost index.js with < IntlProvider > so that all subcomponents can access the intl object.

the environmental background of the problems and what methods you have tried

most of the pages and components are working properly, but the Modal of antdesign reports an error with < FormattedMessage id= "message.id" / > of react-intl. The error message is: [React Intl] Could not find required intl object.. < IntlProvider > needs to exist in the component ancestry.

I looked at the structure of the component through Chrome"s React plug-in, and the reason for this problem is that the Model component is written on the outermost (and App level) so it is not a subcomponent of < IntlProvider >.
clipboard.png

I don"t want to write < IntlProvider > again in every component or page that uses Modal. Is there any good solution?

Jul.09,2021

Thank you @ Xiamen Bing . I also asked on github, and the answer was that I could encapsulate my Component in injectIntl, and then call intl.formatMessage () API. I try to work because < FormattedMessage > is evaluated when Modal render is used, but when formatMessage () API is called, this is evaluated when component is executed.


encapsulate the Modal component itself

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7acec3-25aca.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7acec3-25aca.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?