水平線可以簡單地通過如下方式創(chuàng)建:

<hr style={{ width: "80%", border: "1px solid black" }} />

我們可以調(diào)整寬度、長度等。

如果我想顯示一個指向正確方向的箭頭，而不是直線，最好的方法是什么(顯然可以定制寬度、長度、顏色等)。)?

有很多可用的庫，但是幾乎所有的庫都需要給定兩個組件，并且從一個組件到另一個組件。

如果不是線的定義，我取代它箭頭組件，它應(yīng)該顯示一個箭頭像在圖像中。這似乎是一個相當(dāng)簡單的請求，但是我找不到任何這樣的方法。

您可以在& lthr & gt這將添加箭頭:

const CustomHR = () => <hr className='customHR' />;

ReactDOM.render(<CustomHR />, document.getElementById("react"));

.customHR { 
   margin-top: 50px;
   width: 80%;
   border: 1px solid black;
}

.customHR::after {
    content: '';
    position: absolute;
    right: 10%;
    display: block;
    border-right: 3px solid;
    border-bottom: 3px solid;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) rotate(-45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

一個簡單的SVG解決方案:

<svg width="300" height="20">
  <path d="M 0,10 H 300 L 290,0 M 300,10 L 290,20" fill="none" stroke="black" />
</svg>