使用反引号在 JSX 中添加 <strong> 标签

Question

我有一个 div 将要渲染一些 JSX。在那个 JSX 中，我想加粗一些文本。当我像这样添加我的 jsx 时，出现错误。我似乎找不到关于这个确切问题的任何文章，需要一些帮助。

我确定我遗漏了一些非常简单的东西

这是我的div

我怎样才能只加粗 {Array.length} ？

当我渲染它时显示 Your list contains [object Object] row(s).

 <div>
        <div className='border-solid border-2x border-300rounded-soft text-center cursor-pointer'>
          { `Your list contains ${<strong>{Array.length}</strong>} row(s).`}
        </div>
        </div>

Answer 1

这是因为反引号内的任何东西都会被翻译成字符串。

你可以做的是将它分开（在这种情况下你不再需要反引号）：

<div>
  <div className='border-solid border-2x border-300rounded-soft text-center cursor-pointer'>
    Your list contains row(s). <strong>{Array.length}</strong> row(s).
  </div>
</div>

Answer 2

这样试试，

<div>
  Your list contains <strong>${Array.length}</strong> row(s).
</div>

Answer 3

<div className='border-solid border-2x border-300rounded-soft text-center cursor-pointer'>
  { `Your list contains `} <strong>{Array.length} </strong> {`row(s).`}
</div>

您可以参考文档： https://reactjs.org/docs/jsx-in-depth.html

使用反引号在 JSX 中添加 <strong> 标签

Add <strong> tag within JSX with backticks

html

jsx

reactjs