如何在 React 中绘制水平线

作者

在 React 中画一条水平线

How to draw a horizontal line in React

在 React 中画一条水平线：

  1. 使用<hr />标签并style在其上设置道具。
  2. 设置height行的 并可选择设置backGroundColor和
    color。
应用程序.js
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 中绘制水平线。

请注意，<hr />
（水平线）标签是自闭合的。

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

与任何其他标签一样，我们可以设置一个style道具来为元素设置内联样式。

应用程序.js
<hr
  style={{
    background: 'lime',
    color: 'lime',
    borderColor: 'lime',
    height: '3px',
  }}
/>

style请注意，我们在将prop 传递给div元素时使用了两组花括号。

花括号的外层标记一个要计算的表达式，内层是样式和值的对象。

您还可以在中间绘制一条带有文本的水平线。

应用程序.js
<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>

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

–

发表评论