Javascript 如何在React Js中从API响应中获取HTML标记？

我收到Api的回复如下：

data: {
  id : 20,
  name : "Michael",
  content : "Today is <p>my special day in my life</p> thankyou"
}

数据：{
身份证号码：20，
姓名：“迈克尔”，
内容：“今天是我生命中特别的一天
谢谢”
}

在react代码中，如下所示：

const dataMain = useselector((state) => state.main.data)

return (
  <>
    <div>
      <div className="name"><h2>{dataMain.name}</h2></div>
      <div className="the-content" dangerouslySetInnerHTML={{__html: dataMain.content></div>
    </div>
  </>
)

constdatamain=useselector（（state）=>state.main.data）
返回(
{dataMain.name}
)

结果:

Michael,
Today is <p>my special day in my life</p> thankyou

Michael，
今天是我生命中特别的一天
谢谢

---

html p标记仍然存在，但我希望它在危险的LysetinerHTML中设置内容时消失，请尝试

${dataMain.content}

否则，使用

${}

语法将值设置为state变量。这在其他带有HTML标记的组件上对我有效

示例如下：

class ExampleComponent extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        isLoaded: false,
        content: null
    }
}

componentDidMount() {

    const payload = {};

    fetch("/example",{
        method: "POST",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
    })
        .then((response) => {
            return response.text();
        })
        .then((text) => {
            this.setState({
                isLoaded: true,
                content: `${text}`
            });
        });
}

render() {
    return (
        <React.Fragment>
            {!this.state.isLoaded &&
            <div className="text-info">
                Please wait...
            </div>
            }

            {this.state.isLoaded &&
            <div id="terms-content" dangerouslySetInnerHTML={{__html: this.state.content}}/>
            }

        </React.Fragment>
    )
}

class ExampleComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
isLoaded:false，
内容：空
}
}
componentDidMount（）{
常量有效载荷={}；
获取（“/example”{
方法：“张贴”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（有效负载）
})
。然后（（响应）=>{
返回response.text（）；
})
。然后（（文本）=>{
这是我的国家({
isLoaded：是的，
内容：`${text}`
});
});
}
render（）{
返回(
{！this.state.isLoaded&&
请稍候。。。
}
{this.state.isLoaded&&
}
)
}

---

}

试试这个

${dataMain.content}

-该语法用于模板文本内部，但这里没有。Stackoverflow已从我的帖子中删除了模板文本start+end。我建议OP尝试使用模板文本语法显式提供值。这是毫无意义的。唯一的效果是强制

dataMain.content

成为一个字符串，并通过该对象将其传递给

DangerlySetinerHTML

，无论如何都可以做到这一点。