如何在ReactJS中将模板文本转换为html？

我这里有这个代码：

import React from 'react';

var article = {
  title: 'Hello World',
 }

const App = () => {
  var {title} = article
  var html = `<header>
    <h1>${title}</h1>
  </header>`
  return <div>{html}</div>;
}

从“React”导入React；
风险价值条款={
标题：“你好，世界”，
}
常量应用=（）=>{
var{title}=文章
变量html=`
${title}
`
返回{html}；
}

我在页面上看到的是

helloworld

，而不是通常的html

---

如何在react中将字符串文本转换为HTML？非常感谢，请提前告知。

仅供参考，模板文字是字符串文字。

您只需删除模板文字：）

var文章={
标题：“你好，世界”，
}
常量应用=（）=>{
var{title}=文章
变量html=
{title}
返回{html}；
}

您可以使用React的危险的SetinenerHTML执行此操作，但从名称可以看出，这是危险的，因为很容易在无意中让您的用户暴露在危险的环境中

如果您了解风险，您仍然可以使用它：

import React from 'react';

var article = {
  title: "Hello World"
};

const App = () => {
  var { title } = article;
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: `<header><h1>${title}</h1></header>`
      }}
    />
  );
};

从“React”导入React；
风险价值条款={
标题：“你好，世界”
};
常量应用=（）=>{
var{title}=文章；
返回(
);
};

如果您只是想在JSX中嵌入表达式，只需将它们用大括号括起来：

import React from "react";

var article = {
  title: "Hello World"
};

const App = () => {
  var { title } = article;
  return (
    <div>
      <header>
        <h1>{title}</h1>
      </header>
    </div>
  );
};

从“React”导入React；
风险价值条款={
标题：“你好，世界”
};
常量应用=（）=>{
var{title}=文章；
返回(
{title}
);
};

在您的例子中，变量

html

只是一个字符串，当您尝试在jsx中像

{html}

一样呈现它时，它被显式地呈现为字符串而不是html

这与试图呈现

{“Hello There”}

没有什么不同。虽然保存到您想要的结果变量工作，但我不推荐它。对于您的用例来说，直接使用JSX要简单得多。比如说,

var文章={
标题：“你好，世界”
};
常量应用=（）=>{
var{title}=文章；
返回(
{title}
);
};

如果您有很多试图呈现的元素，那么将逻辑抽象到新组件总是一个更好的主意。比如说,

//新的头组件
常数头=（道具）=>{
返回(
{props.title}
{/*要渲染的其他组件或元素*/}
);
}
风险价值条款={
标题：“你好，世界”
};
常量应用=（）=>{
var{title}=文章；
返回(
);
};

既然可以直接使用JSX，为什么还要使用模板文字？

import React from "react";

var article = {
  title: "Hello World"
};

const App = () => {
  var { title } = article;
  return (
    <div>
      <header>
        <h1>{title}</h1>
      </header>
    </div>
  );
};