rc-slider 图标或 html 标签

Question

我在我的 React 应用程序中使用了 re-slider，有人知道是否可以使用 icon/html 设置标签吗？

我尝试按如下方式定义选项：

const sliderOptions = {
  1: {
    style: {
      color: '#00365f',
    },
    label: '<i class="fas fa-check"></i>',
  },1: {
    style: {
      color: '#00365f',
    },
    label: '<i class="fas fa-times"></i>',
  }           
};

但 html 标签已在实体中转换

&lt;i class="fas fa-check"&gt;&lt;/i&gt;

Answer 1

来自example documentation：

const marks = {
  '-10': '-10°C',
  0: <strong>0°C</strong>,
  26: '26°C',
  37: '37°C',
  50: '50°C',
  100: {
    style: {
      color: 'red',
    },
    label: <strong>100°C</strong>,
  },
};

不要将其作为字符串包含，而是将其作为 DOM/React 节点包含：

const sliderOptions = {
  1: {
    style: {
      color: '#00365f',
    },
    label: <i className="fas fa-check"></i>,
  },1: {
    style: {
      color: '#00365f',
    },
    label: <i className="fas fa-times"></i>,
  }           
};

Answer 2

下面是您的演示示例代码。

<Slider
  min={0}
  max={100}
  step={10}
  marks={{
    0: 0,
    30: <p style={{ color: 'green', fontSize: 20 }}>30</p>,
    50: <input type="button" value="50 hit" />,
    70: <i className="fas fa-3x fa-check"></i>,
    100: <i className="fas fa-2x fa-times"></i>
  }}
/>

输出如下所示

rc-slider 图标或 html 标签

rc-slider icon or html label

reactjs

rc-slider