是否可以执行以下操作:
const data={
star: "<h1>STAR</h1>",
moon: "<h3>moon</h3>"
}
const App = () => {
return(
<div>{data.start}</div>
);
}
我得到的是<h1>STAR</h1>
的实际字符串而不仅仅是STAR
答案 0 :(得分:0)
我认为你不能。您可以返回一个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>
);
};
答案 1 :(得分:0)
可以使用诸如h2x
或react-render-html
之类的第三方库将字符串转换为JSX。由于可能存在解析DOM的库中可能存在的漏洞和安全问题,因此使用用户输入来执行此操作可能是不安全的。
以这种方式使用组件是不可能的,因为组件名称与转换期间实现它们的函数没有关联。