javascript - 如何在 React 中绘制红色水平线

Question

如何使用动态颜色在 react 组件中绘制水平线(hr)？

这是我到目前为止所拥有的:

render {
    let color = 'red';
    return (
        <div> 
            There is a red HR
           <hr />
        <div>
    )
}

Answer 1

设置组件的一种方法:

const ColoredLine = ({ color }) => (
    <hr
        style={{
            color: color,
            backgroundColor: color,
            height: 5
        }}
    />
);

然后将其用于:

<ColoredLine color="red" />

有关如何设计样式的完整详细信息 <hr /> ，参见http://www.sovavsiti.cz/css/hr.html