在作为道具传递给组件的文本字符串中添加一些粗体文本

Question

我在 React 中有一个可重用的组件，我可以将一些非常简单的 props 传递给：

const Section1 = (props) => (
 <div className="section">
  <div className="container is-narrow">
    <div className="content is-medium"><h2 className="title is-1 is-bottom-bordered">{props.section1Title}</h2></div>
      <div className="columns">
        <div className="column is-half">
          <div className="content">
              <blockquote>{props.section1Blockquote}</blockquote> 
          </div>
        </div>
        <div className="column is-half">
          <div className="content">
            <p>{props.section1Text}</p>
          </div>
        </div>
      </div>
  </div>
</div> 

当我使用这个组件时，我会像这样传递道具：

<Section1
  section1Title="Example title"
  section1Blockquote="Example blockquote"
  section1Text="Example text"
/>

在我作为道具传递的字符串中，是否可以对部分文本进行样式设置，使其加粗？不是整个字符串，只是其中的一部分。在上面的例子中，section1Blockquote，我怎样才能把“例子”这个词加粗？

非常感谢。

Answer 1

您应该将 jsx 传递给 props，以便您可以使用自己的类或标记。

<Section1
  section1Title={<React.Fragment>Example <span className="bold">title</span></React.Fragment>}
  section1Blockquote="Example blockquote"
  section1Text="Example text"
/>

在你的 css 文件中。

.bold {
  font-weight: bold;
}

或者你可以直接使用强标签。

<Section1
  section1Title={<>Example <strong>title</strong></>}
  section1Blockquote="Example blockquote"
  section1Text="Example text"
/>

更新：我们可以使用 React.Fragment(shorthand <>) 而不是包裹在任何 html 标签（span）中，它不会在外面创建额外的元素。