React组件中替换水平线为可自定义箭头的简便实现方法

你可以直接封装一个纯React组件，不需要依赖任何第三方库，就能像使用<hr>一样替换成箭头，同时支持自定义宽度、颜色、尺寸等属性。以下是两种简洁的实现方案：

方案一：Flex布局拆分线条与箭头 #

这种方式结构清晰，容易理解，适合需要灵活调整线条和箭头间距的场景：

import React from 'react';

const ArrowSeparator = ({
  width = '80%',
  lineThickness = '1px',
  color = 'black',
  arrowSize = '12px',
  gap = '8px'
}) => {
  return (
    <div 
      style={{
        display: 'flex',
        alignItems: 'center',
        width: width,
        gap: gap
      }}
    >
      {/* 水平线部分 */}
      <div 
        style={{
          flexGrow: 1,
          height: lineThickness,
          backgroundColor: color
        }}
      />
      {/* 箭头部分（CSS边框实现） */}
      <div
        style={{
          width: 0,
          height: 0,
          borderTop: `${arrowSize} solid transparent`,
          borderBottom: `${arrowSize} solid transparent`,
          borderLeft: `${arrowSize} solid ${color}`
        }}
      />
    </div>
  );
};

export default ArrowSeparator;

使用方式 #

直接替换原来的<hr>即可，参数按需传递：

// 默认样式
<ArrowSeparator />

// 自定义配置
<ArrowSeparator 
  width="70%" 
  color="#666" 
  lineThickness="2px" 
  arrowSize="14px" 
  gap="10px"
/>

方案二：绝对定位箭头（更少DOM元素） #

如果希望DOM结构更简洁，可以用绝对定位把箭头放在线条右侧：

import React from 'react';

const ArrowSeparator = ({
  width = '80%',
  lineThickness = '1px',
  color = 'black',
  arrowSize = '12px'
}) => {
  return (
    <div 
      style={{
        position: 'relative',
        width: width,
        height: lineThickness,
        backgroundColor: color,
        marginTop: arrowSize,
        marginBottom: arrowSize
      }}
    >
      <div
        style={{
          position: 'absolute',
          right: `-${arrowSize}`,
          top: '50%',
          transform: 'translateY(-50%)',
          width: 0,
          height: 0,
          borderTop: `${arrowSize} solid transparent`,
          borderBottom: `${arrowSize} solid transparent`,
          borderLeft: `${arrowSize} solid ${color}`
        }}
      />
    </div>
  );
};

export default ArrowSeparator;

可配置参数说明 #

• width：组件整体宽度，和<hr>的width属性用法一致
• lineThickness：水平线的粗细
• color：线条和箭头的统一颜色（如需分开可新增arrowColor参数）
• arrowSize：箭头的尺寸，控制箭头的大小
• gap（方案一专属）：线条与箭头之间的间距

两种方案都完全满足你的需求：直接替换<hr>的写法，支持全自定义配置，不需要引入复杂的第三方库。

内容的提问来源于stack exchange，提问作者Light Yagami