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

【问题标题】：Can't render html tags in a template string in react.js无法在 react.js 的模板字符串中呈现 html 标签
【发布时间】：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>
);

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

【问题讨论】：

标签： javascript html reactjs ecmascript-6 jsx

【解决方案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>
);

【讨论】：