如何在 React.js 中加粗特定文本

React 2年前 109

使用内联样式将 React.js 中的特定文本加粗，例如 <span style={{fontWeight: 'bold'}}>火焰兔</span>。粗体字体只会应用于添加它的元素及其子元素。

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Hello <span style={{fontWeight: 'bold'}}>火焰兔</span>
        !!!
      </p>
    </div>
  );
};

export default App;

我们使用内联样式将元素中的某些文本加粗。

请注意 ，当指定为内联样式时，多词属性是驼峰式的。

内联样式中的第一组花括号标记表达式的开始，第二组花括号是包含样式和值的对象。

粗体字体只会应用于 span 元素。

如果需要经常这样做，我们可以将 span 元素提取到呈现其子项的组件中。

function BoldText({children}) {
  return <span style={{fontWeight: 'bold'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Hello <BoldText>火焰兔</BoldText>
        !!!
      </p>
    </div>
  );
};

export default App;

此代码示例实现了相同的结果。无论我们在 BoldText 组件的开始标签和结束标签之间传递什么，都会应用粗体样式。

另一种解决方案是在全局 css 文件中定义一个 bold 类。

.bold {
  font-weight: bold;
}

下面是我们如何导入 App.css 文件并使用 bold类。

import './App.css';

const App = () => {
  return (
    <div>
      <p style={{fontSize: '2rem'}}>
        Hello <span className="bold">火焰兔</span>
        !!!
      </p>
    </div>
  );
};

export default App;