React 中的 hr 元素

React 是一個基於元件的庫，允許開發人員在 JavaScript 中構建漂亮的使用者介面。React 的最大優勢之一是你可以重用 UI 元件，因此你只需編寫最少量的程式碼。

React 還允許你自定義每個元件的樣式和類，甚至可以通過 props 傳遞動態值來自定義元件每個例項的字型和顏色。

在 React 中使用 <hr> 元素作為部分分隔符

一些 Web 開發人員不知道在 HTML 中，有一個單獨的 <hr> 元素用於部分分隔符。最好使用單獨的 HTML 元素，而不是依賴樣式在 UI 中設定分隔線。

<hr> 元素沒有額外的樣式看起來並不好看。如果你想在你的 web 應用程式中使用這個 HTML 元素，你可以使用內聯樣式或者在你的 CSS 檔案中定義一個單獨的類。

讓我們看一個例子。

export default function App() {
  return (
    <div className="App">
      Lorem ipsum
      <Divider
        primaryColor="red"
        secondaryColor="grey"
        heightValue={20}
      ></Divider>
      Lorem Ipsum
    </div>
  );
}
function Divider(props) {
  const { primaryColor, secondaryColor, heightValue } = props;
  console.log(heightValue);
  return (
    <hr
      style={{
        color: primaryColor,
        backgroundColor: secondaryColor,
        height: heightValue
      }}
    />
  );
}

在這個例子中，我們有一個自定義的 Divider 元件，它接受三個 props：primaryColor、secondaryColor 和 heightValue。我們使用子元件中的 style 屬性在 React 中編寫內聯樣式。

為了設定內聯樣式，我們使用花括號將其中的程式碼解釋為有效的 JavaScript。在第一對花括號中，我們放置了一個物件，因此最終我們得到了兩個開啟和關閉的花括號。

這樣，我們可以從 prop 物件訪問值並將它們用作值來設定元素的樣式。請注意，像 backgroundColor 這樣的屬性名稱與像 background-color 這樣的 CSS 屬性不同。

這些詞是組合的和駝峰式的。

這樣，你的應用程式中可以有多個 <hr> 分隔符。你可以通過傳遞 props 自定義元素的顏色、大小和其他視覺屬性。