reactjs - rc-滑块图标或 html 标签

Question

我在我的反应应用程序中使用重新滑块，有人知道是否可以使用 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标签已经转换为实体

<i class="fas fa-check"></i>

标签： reactjsrc-slider

Answer 1

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

<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>
  }}
/>

输出将如下所示