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

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"
/>

在我作为 props 传递的字符串中，是否可以设置部分文本的样式，使其变为粗体？不是整个字符串，只是其中的一部分。在上面的示例中，section1Blockquote，如何将 'Example' 加粗？

非常感谢。

Answer 1

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

<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 标签内，这不会在外部创建额外的元素。

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

Adding some bold text inside a text string passed as a prop to a component

reactjs

react-props