时间戳

首页 > 解决方案 > 如何在返回调用中将 jsx 作为字符串传递

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

问题描述

是否可以执行以下操作：

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

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

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

标签： reactjsjsx

解决方案

我不认为你可以。您可以返回一个 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>
  );
};

推荐阅读