Question

是否可以执行以下操作：

const data={
star: "<h1>STAR</h1>",
moon: "<h3>moon</h3>"
}

const App = () => {
return(
<div>{data.start}</div>
);
}

我得到的是<h1>STAR</h1>的实际字符串而不仅仅是STAR

Answer 1

我认为你不能。您可以返回一个html字符串并可能显示它，但是JSX不是字符串，它被编译为创建这些元素的javscript代码。它在构建应用程序时有效，我认为您不能在运行时对其使用动态字符串。您可以执行以下操作：

const getData = (which) => {
  if (which === 'star') {
    return (<h1>STAR</h1>);
  }
  if (which === 'moon') {
    return (<h3>moon</h3>);
  }
  return null; // nothing will display
}


const App = () => {
  return (
    <div>{getData('star')}</div>
  );
};

Answer 2

可以使用诸如h2x或react-render-html之类的第三方库将字符串转换为JSX。由于可能存在解析DOM的库中可能存在的漏洞和安全问题，因此使用用户输入来执行此操作可能是不安全的。

以这种方式使用组件是不可能的，因为组件名称与转换期间实现它们的函数没有关联。

如何在返回调用中将jsx作为字符串传递

2 个答案: