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

Question

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

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> 

当我使用这个组件时，我会像这样传递 Prop :

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

在我作为 Prop 传递的字符串中，是否可以设置部分文本的样式，使其变为粗体？不是整个字符串，只是其中的一部分。在上面的示例 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 标记(跨度)中，它不会在外部创建额外的元素。