a simple html string parser
npm install 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
{
this.state.res.Data.map((item,index)=>{
return
{ item }
})
}
}
}
`我们需要定义一个 Class 或者 function 来存放标签的内容 类似于上面的Pet类
它接收的参数为
`
{
name:string; // 标签名
children:[] // 子元素列表
...others:{} // html标签上原本的一些属性 和自己手动传入的一些属性
}
``