React 怎么修改 tag 标签内的内容

Question

有一个 Text 组件,大致就是下边这样

return <div>{this.props.children}</div>

用的时候这样

<h1>

    <Text>这是一个 text 组件</Text>

</h1>

我想给 Text 类加一个 redMark 方法,能够让 keyword 标红

redMark=(keyword)=>{} //如果文字是 '阿西吧',keyword 是 '西',那么 '西'变成红色

那么怎么才能修改<Text></Text>中的内容呢?

我先想的是用 state

return <div>{this.state.text}</div>

然后 setState来改变,但是 react 并不会转义字符串为 html,比如下面这样

let result = str.replace(reg,"<font style='color:red;font-weight:700;'>"+keywords+"</font>")

this.setState({text:result})

有没有什么解决思路呢?

Answer 1

是什么东西导致你不用classname去更改样式，不用style去更改样式，非要用font这种被淘汰的东西来更改样式import React, { Component } from 'react';class Test extends Component {&nbsp; render() {&nbsp; &nbsp; const result = '<p class="red">' + this.props.children + '</p>'&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div dangerouslySetInnerHTML={{__html: result}}/>&nbsp; &nbsp; );&nbsp; }}export default Test;