text2re

一个简单的字符串转ReactElement的工具

主要的功能是把一个html字符串转为可自定义的ReactElement对象。

例子: 我们把后台返回的一些数据中的字符串转为标签 并添加点击事件
``
import React, { Fragment, ReactNode } from 'react';

class Page extends React.Component {
state = {
resData:[
'猫的品种有很多，蓝猫是其中的一种, ',
'狗的品种有很多，拉布拉多是其中的一种',
]
}
render (){
return


}
}
`

上述代码中，标签会被直接转译成字符串，这并不是我们想要的结果。我们可以使用以下方法来处理
`
import React, { Fragment, ReactNode } from 'react';
import TextToRE from './text2RE';


// 我们自己定义的承载标签的组件
class Pet extends React.Component {
onClick = (e) => {
this.props.onClick(e, this.props.children.join(''));
}
render() {
const {name, children, ...others} = this.props;
if(name==='span'){
return {this.props.children}
}
return this.props.children;
}
}


const PetTag = text2RE(Pet);

class Page extends React.Component {
state = {
resData:[
'猫的品种有很多，蓝猫是其中的一种, ',
'狗的品种有很多，拉布拉多是其中的一种',
]
}
onClick = (_e,text) => {
alert(您点击了 ${text});
}
render (){
return


}
}
`

我们需要定义一个 Class 或者 function 来存放标签的内容 类似于上面的Pet类

它接收的参数为
`
{
name:string; // 标签名
children:[] // 子元素列表
...others:{} // html标签上原本的一些属性 和自己手动传入的一些属性
}
``