在开发前端应用时，多语言是非常重要的一个部分。使用 React 作为前端架构，我们可以使用 react-intl 库来实现国际化。但在开发和测试阶段，由于语言包并不是总是及时完善、有经验的开发者手误等，都可能导致渲染语言错误，影响应用体验。
react-intl-prod-on-error 包提供了一个简单的组件，在生产环境下当界面渲染语言出错时，可以更友好地提示用户错误信息，同时会在开发时输出错误日志，使得开发者可以及时定位错误并进行修复。
安装
将 react-intl-prod-on-error 包作为你项目的依赖，可以使用 npm 或 yarn 来安装。
npm install react-intl-prod-on-error
yarn add react-intl-prod-on-error
使用
在你的应用中，使用 react-intl-prod-on-error 的方式非常简单。只需要将其当做你 React 应用的父元素即可。
import ProdOnError from 'react-intl-prod-on-error';
ReactDOM.render(
<ProdOnError>
<App />
</ProdOnError>,
document.getElementById('root')
);示例
下面是一个针对 react-intl-prod-on-error 的完整示例。我们创建一个应用，当渲染语言包错误时，给出了更友好的提示。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------------- ------------ - ---- -------------
------ ----------- ---- ---------------------------
----- -------- - -
----- -
---------- ----- ------
----------- -----------
--
------ -
---------- ------ ----
----------- ---------
--
--
----- --- - -- -- -
----- -------- ---------- - ---------------
----- ------------------ - ----- -- -
------------------------------
--
------ -
-------------
-----
----
-----------------
-------------------
----------------------------------------
--
-----
---
------- --- ---- - -
-----------------
--------------------
-----------------------------------------
-------------------- ------- -- ---- -----
--
- - -
-----------------
---------------------
------------------------------------------
-------------------- ------- -- ----- -----
--
--
----
------- ----------------------------- ---------------
------- ---------------------------
------- ----------------------
---------
------
--------------
--
--
----- ---------- - -- -- -
------------- ----------- -------------------------
---- --
---------------
--
--------------------------- --- ---------------------------------总结
react-intl-prod-on-error 是一个非常有用的工具，它能够帮助我们在生产环境下，更加友好的提示用户错误信息，同时在开发阶段能够更快地定位和修复错误。使用 react-intl-prod-on-error 能够为我们的国际化开发提供有效的保障，提高开发效率，增强用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e91