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

Question

有一个 Text 组件,大致就是下边这样return <div>{this.props.children}</div>用的时候这样<h1>    <Text>这是一个 text 组件</Text></h1>我想给 Text 类加一个 redMark 方法,能够让 keyword 标红redMark=(keyword)=>{} //如果文字是 '阿西吧',keyword 是 '西',那么 '西'变成红色那么怎么才能修改<Text></Text>中的内容呢?我先想的是用 statereturn <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 {

  render() {

    const result = '<p class="red">' + this.props.children + '</p>'

    return (

      <div dangerouslySetInnerHTML={{__html: result}}/>

    );

  }

}

export default Test;