react 替换标签内容_如何在 React 里自定义标签和属性？

日常开发中通常会有一些需求，需要定义一些全局通用的组件，在 Vue 里是有这样的功能，但是在 React 里，没有见过有类似的做法，通常都是在需要的时候引入组件，原则上在 Jsx 里只允许 html 的文本标签以及 function 类型的标签，本文的做法只做参考

背景

最近在考虑做国际化，但是系统构建之初，产品并没有做国际化的计划，系统开发上线以后，又有了国际化的需求，但是系统已经上线，这时候在去用 react-i18n 之类的方案太重了，所有的页面、组件都要引用这个库，需要国际化的地方都需要修改，同时要维护语言的映射文件，工作量太大了，所有考虑一种更好的方案，思考如何能无侵入的实现国际化，这里的构建自定义标签的目的是希望通过标签收集系统文字。

示例代码：

render(){

return (

需要翻译的文字

需要翻译的文字

)

}

所有 local 标签或者加了 translate="yes" 的标签里的文字都需要被翻译，translate是 HTML5 的新属性，这里借用它。

自定义标签有哪些方案

编译期转换

一般通过编译期转换是可以做到的，但是需要开发相关 webpack loader ，调整生成的代码，这么做比较麻烦。

运行期实现

运行期做的话，可以在 render 里拿到虚拟DOM子节点，遍历，找到自定义的标签，然后特殊处理