时间戳

首页 > 解决方案 > 变量 JSX 进入危险地渲染 SetInnerHTML()

reactjs - 变量 JSX 进入危险地渲染 SetInnerHTML()

问题描述

我需要将一个变量插入到 dangerouslySetInnerHTML 中。

import serviceAPI from "serviceAPI";
const [content,setContent] = useState("");
const [firstName,setFirstName] = useState("Thomas");

    useEffect(() => {
         fetchContent()
     }, [])
     
     const fetchContent = async () => {
     // Return string : "<h1>Hello {firstName}</h1>"
     const result = await serviceAPI.getContent()
     setContent(text)
     }
    return (
      <p dangerouslySetInnerHTML={{ __html: content.toString() }}></p>
    )

这段代码的结果：Hello {firstName}

我需要的结果：Hello Thomas

标签： reactjs

解决方案

您可以使用字符串插值或简单连接将变量插入字符串：

const text = `<h1>Hello ${firstName}</h1>`

此外，您还需要将 firstName 添加到 useEffect 的依赖项列表中。

在您的代码示例中，您不需要使用useEffect，我会将其更改为：

const [firstName,setFirstName] = useState("Thomas")
const content = `<h1>Hello ${firstName}</h1>`
 
return (
  <p dangerouslySetInnerHTML={{ __html: content }} />
)

如果字符串是从 API 返回的，您可以使用正则表达式搜索和替换：

const text = "<h1>Hello {firstName}</h1>"
const newText = text.replace(/{firstName}/g, firstName)

推荐阅读