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 自定义元素的颜色、大小和其他视觉属性。