如何在 React 中画一条水平线

在 React 中画一条水平线:

  1. 使用 <hr /> 标签并在其上设置 style 属性。
  2. 设置线条的高度,并可选择设置背景颜色和颜色。
export default function App() {
  return (
    <div>
      {/* 👇️ colored horizontal line */}
      <hr
        style={{
          background: 'lime',
          color: 'lime',
          borderColor: 'lime',
          height: '3px',
        }}
      />

      {/* 👇️ colored horizontal line */}
      <div
        style={{
          background: 'lime',
          height: '3px',
        }}
      />

      {/* 👇️ basic horizontal line */}
      <hr />

      {/* 👇️ horizontal line with text */}
      <div
        style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}
      >
        <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} />

        <div>
          <p style={{width: '70px', textAlign: 'center'}}>Example</p>
        </div>

        <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} />
      </div>
    </div>
  );
}

如何在 React 中画一条水平线

代码示例展示了如何在 React 中绘制水平线。

请注意,<hr />(水平规则)标签是自闭合的。

<hr /> 元素代表段落级元素之间的主题中断。

与任何其他标签一样,我们可以设置一个 style 属性来设置内联元素的样式。

<hr
  style={{
    background: 'lime',
    color: 'lime',
    borderColor: 'lime',
    height: '3px',
  }}
/>

请注意 ,在将样式属性传递给 div 元素时,我们使用了两组花括号。

花括号的外部集合标记要评估的表达式,内部集合是样式和值的对象。

我们还可以在中间画一条带有文本的水平线。

<div
  style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}
>
  <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} />

  <div>
    <p style={{width: '70px', textAlign: 'center'}}>Example</p>
  </div>

  <div style={{flex: 1, height: '1px', backgroundColor: 'black'}} />
</div>

确保根据实际内容的宽度调整 p 元素的宽度。