React标题- Bold

Question

我想把标题的前半部分写成粗体。

<Header>
    <PageHeader
        style={{ padding: 10 }}
        className="site-page-header"  
        title="AbcDef" />
</Header>

如何使标题AbcDef (标题的一部分是粗体)？

这个是可能的吗？谢谢

Answer 1

蚁群设计方法

<PageHeader
  style={{ padding: 10 }}
  className="site-page-header" 
  title={
    <h1>
      <span style={{fontWeight: 'bold'}}>Bold</span> Title
    </h1>}
/>

纯反应方式

如果您需要一个选项/支持来设置标题(从左到右)中粗体的字符数，您可以这样做：

父组件

<PageHeader
  ...
  boldCharsCount={3}
</PageHeader>

PageHeader组件

const PageHeader = ({title, boldCharsCount, ...rest}) => {
  const part1 = title.substr(0,0+boldCharsCount);
  const part2 = title.substr(0+boldCharsCount);

  return (
    <span>
      <span style={{fontWeight: 'bold'}}>
        {part1}
      </span>
      {part2}
    </span>
  );
}

我为您创建了一个小演示- 如何在反应中首先生成文本/标题的N个字符

请记住，您通过boldCharsCount传递的号码也是在计算空格。因此，您需要稍微调整一下这个实现，以涵盖这种情况。

Answer 2

解决这个问题的一种方法是将您要传递给PageHeader的“标题”支柱作为一个HTML，而不仅仅是一个字符串，这样您就可以将标记放在您想要的粗体文本周围。

您的PageHeader接口需要有标题的这个类型(如果需要的话，也可以使用其他HTML类型)。

title: HTMLHeadingElement

现在，当您将标题传递给PageHeader时，它将如下所示

<Header>
    <PageHeader
        style={{ padding: 10 }}
        className="site-page-header"  
        title={<h1><strong>Abc</strong>Def</h1>} />
</Header>