html - 使用动态设置的颜色来响应 <hr/>

Question

我想要一个<hr />在我的 react 应用程序中。我想改变它在不同地方的颜色？有什么办法可以做到吗？如果我们使用功能组件来实现这一点，应该怎么做？

Answer 1

其实没什么特别的。

const Rule = ({ color }) => (
  <hr
    style={{
      borderColor: color,
    }}
  />
);

const App = () => (
  <div>
    Here's an orange rule. <Rule color="orange" />
    Here's a blue rule. <Rule color="blue" />
  </div>
);

ReactDOM.render(<App />, document.querySelector("main"));

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