1.0.5 • Published 5 years ago
text2re v1.0.5
一个简单的字符串转ReactElement的工具
主要的功能是把一个html字符串转为可自定义的ReactElement对象。
例子: 我们把后台返回的一些数据中的字符串转为标签 并添加点击事件
import React, { Fragment, ReactNode } from 'react';
class Page extends React.Component {
state = {
resData:[
'猫的品种有很多,<span>蓝猫</span>是其中的一种, ',
'狗的品种有很多,<span>拉布拉多</span>是其中的一种',
]
}
render (){
return <div>
{
this.state.res.Data.map((item,index)=>{
return <li key="index">{ item }</li>
})
}
</div>
}
}
上述代码中,标签会被直接转译成字符串,这并不是我们想要的结果。我们可以使用以下方法来处理
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 <span className="pet" onClick={this.onClick} >{this.props.children}</span>
}
return this.props.children;
}
}
const PetTag = text2RE(Pet);
class Page extends React.Component {
state = {
resData:[
'猫的品种有很多,<span>蓝猫</span>是其中的一种, ',
'狗的品种有很多,<span>拉布拉多</span>是其中的一种',
]
}
onClick = (_e,text) => {
alert(`您点击了 ${text}`);
}
render (){
return <div>
{
this.state.res.Data.map((item,index)=>{
return <li key="index">
<PetTag onClick={this.onClick}>{ item }</PetTag>
</li>
})
}
</div>
}
}
我们需要定义一个 Class 或者 function 来存放标签的内容 类似于上面的Pet类
它接收的参数为
{
name:string; // 标签名
children:[] // 子元素列表
...others:{} // html标签上原本的一些属性 和自己手动传入的一些属性
}