无法在 react.js 的模板字符串中呈现 html 标签

Posted 2023-02-21

【中文标题】无法在 react.js 的模板字符串中呈现 html 标签

【英文标题】：Can't render html tags in a template string in react.js

【发布时间】：2019-02-28 21:21:27

【问题描述】：

Google 了，但还是不知道如何在 React 的模板字符串中渲染 html 标签：

return (
  <p className="text-left m-3">
     this.state.movies ? `Showing <strong>`$this.state.movies.length</strong`> : 
                          `DB is empty`
     
  </p>
);

有什么优雅的“反应方式”来解决它吗？

【参考方案1】：

您可以简单地使用span 来包装元素，而不是将它们作为字符串返回

return (
  <p className="text-left m-3">
     this.state.movies ? <span>Showing <strong>this.state.movies.length</strong></span> : 
                          <span>DB is empty</span>
     
  </p>
);

【参考方案2】：

您在代码中做错的事情很少。 1. 模板字面量不能直接作为回报，需要在test $value里面加上模板字面量 2. 你这里有语法错误，即模板文字应该在结束标记元素之后结束 strong

 `Showing <strong>`$this.state.movies.length</strong`>

这样做

return (
  <p className="text-left m-3">
     this.state.movies ? <span>`Showing <strong>$this.state.movies.length</strong>`</span> : 
                          <span>`DB is empty`</span>
     
  </p>
);

或

将模板字面量分配给局部变量并在返回时调用它

render()
   const text = `Showing <strong>$this.state.movies.length</strong>`;
   const text1 = `DB is empty`;
   return (
     <p className="text-left m-3">
     this.state.movies ? <span>text</span> : <span>text1</span>
     </p>
   )

【参考方案3】：

你可以像这样简单地使用：

return (
  <p className="text-left m-3">
     Showing 
   this.state.movies &&
    // I would also make sure its length
     this.state.movies.length > 0 &&
     // to make sure not to print 0
     <strong>this.state.movies.length</strong> 
     || 'DB is empty'
  </p>
);