如何在React Js中从API响应中获取HTML标签？
如何在React Js中从API响应中获取HTML标签？
提问于 2021-05-18 17:12:08
我得到了来自Api的如下响应：
data: {
id : 20,
name : "Michael",
content : "Today is <p>my special day in my life</p> thankyou"
}在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>
</>
)结果：
Michael,
Today is <p>my special day in my life</p> thankyouhtml p标记仍然在那里，而我希望它消失。
回答 1
Stack Overflow用户
发布于 2021-05-18 17:55:50
在dangerouslySetInnerHTML中设置内容时，尝试使用${dataMain.content}，否则使用${}语法将值设置为状态变量。这在我使用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>
)
}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67583250
复制相关文章
相似问题
腾讯云开发者
