2018-12-11 react.js字符串设置某段字符串改变颜色样式

需求是：一段字符串如：麻辣烫小龙虾中的小龙虾，让其中的小龙虾三个字符加粗变颜色等。

rendHot(name) {
//name就是“麻辣烫小龙虾中的小龙虾”
//searchValue：要匹配的字段例如:小龙虾
let { searchValue } = this.props;

1.先找出该字符串中的所有小龙虾，把他替换成<*>小龙虾<*>
name=name.replace(new RegExp(searchValue,"g"),'<*>'+searchValue+'<*>')

2.再对其转换变成数组
let nameArray = name.split('<*>');

3.循环该数组分别添加对应的样式
let ar = [];
    for (let i = 0; i < nameArray.length; i++) {
        ar.push(<p key={i} className={ nameArray[i] === searchValue ? styles.hot:styles.de}>{nameArray[i]}</p>);
    }

4.输出界面
        return (
            <span className={styles.n}>
                {ar.map((item) => {
                    return (item);
                })}
                </span>
        );
    }