Question

用Google搜索它，但仍然无法在React中实现如何在模板字符串中呈现html标签：

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

是否有任何优雅的“反应方式”来解决？

Answer 1

您可以简单地使用id action user weight timestamp 830093 opt_in 56610 NaN 2017-01-29T23:03:35.000Z 830095 level_up 56610 NaN 2017-01-29T23:03:36.000Z 2312674 checkout_item 56610 239.99 2017-05-15T23:19:20.000Z 2313301 checkout_item 56610 239.99 2017-05-15T23:19:20.000Z 2315639 checkout 56610 239.99 2017-05-15T23:19:20.000Z 2316158 daily_login 56610 NaN 2017-05-15T23:13:33.000Z 2402783 daily_login 56610 NaN 2017-05-23T10:51:09.000Z 2438779 daily_login 56610 NaN 2017-05-24T01:10:52.000Z 2530543 daily_login 56610 NaN 2017-05-25T22:21:10.000Z 2573416 daily_login 56610 NaN 2017-05-28T01:38:46.000Z 2679591 daily_login 56610 NaN 2017-06-05T09:33:59.000Z 2813275 checkout_reject 56610 NaN 2017-06-15T04:29:02.000Z 2981829 daily_login 56610 NaN 2017-06-26T16:40:56.000Z 3195018 daily_login 56610 NaN 2017-07-11T09:11:35.000Z 3244062 daily_login 56610 NaN 2017-07-14T17:46:04.000Z 3311904 daily_login 56610 NaN 2017-07-20T00:50:08.000Z 3313849 checkout 56610 459.20 2017-07-20T09:17:12.000Z 3313852 checkout_item 56610 459.20 2017-07-20T09:17:12.000Z 3764903 daily_login 56610 NaN 2017-08-18T10:24:23.000Z 3781360 checkout_update 56610 459.20 2017-08-19T07:10:25.000Z 3781363 checkout_item 56610 459.20 2017-08-19T07:10:25.000Z 3781366 checkout_accept 56610 NaN 2017-08-19T07:10:26.000Z 4095024 daily_login 56610 NaN 2017-09-05T07:31:44.000Z 4557587 daily_login 56610 NaN 2017-10-01T19:40:10.000Z 4652940 daily_login 56610 NaN 2017-10-06T17:36:52.000Z 5455155 checkout_item 56611 NaN 2017-11-17T00:35:29.000Z 5455155 checkout_update 56611 NaN 2017-11-17T00:35:29.000Z 5455155 checkout_accept 56611 NaN 2017-11-17T00:35:41.000Z 5455155 daily_login 56611 NaN 2017-11-18T00:31:27.000Z 5455155 daily_login 56611 NaN 2017-11-19T00:37:19.000Z 5455155 checkout_item 56611 100.00 2017-11-19T00:35:29.000Z 5455155 checkout_item 56611 100.00 2017-11-17T00:35:29.000Z 5455155 checkout 56611 100.00 2017-11-17T00:35:29.000Z 5455155 daily_login 56610 NaN 2017-11-19T00:38:25.000Z来包装元素，而不必将它们作为字符串返回

span

Answer 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>
);

OR

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

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>
   )
}

Answer 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>
);

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

3 个答案: