如何在React中借助react-slick-slider使用JSX渲染自定义图标组件

没问题，我来帮你把这个图标渲染逻辑封装到react-slick的Slider里，实现你想要的效果～

我们可以通过封装可复用函数或者直接内联逻辑的方式，把图标渲染整合到Slider组件中，下面提供两种实用的实现方式：

方法1：封装独立函数（推荐，便于复用） #

先把图标渲染逻辑抽成单独的函数，让它能接收name、disabled和color参数（适配CropTool需要的disabled属性）：

// 封装图标渲染函数
const renderToolIcon = (name, disabled, color) => {
  switch (name) {
    case ArrowsTool.name:
      return <ArrowsToolComponent key={name} color={color} />;
    case ZoomTool.name:
      return <ZoomTool key={name} color={color} />;
    case GridTool.name:
      return <GridToolComponent key={name} color={color} />;
    case CropTool.name:
      return <CropToolComponent disabled={disabled} key={name} color={color} />;
    default:
      return null;
  }
};

接着准备一个工具名称的列表，用来遍历生成Slider的每一项：

// 定义需要渲染的工具列表
const toolList = [
  ArrowsTool.name,
  ZoomTool.name,
  GridTool.name,
  CropTool.name,
];

// 组件渲染部分
return (
  <Slider>
    {toolList.map((toolName) => 
      renderToolIcon(toolName, this.props.disabled, /* 这里传入你的color值，比如this.props.color */)
    )}
  </Slider>
);

方法2：直接内联逻辑（适合仅在Slider中使用的场景） #

如果这个渲染逻辑不需要复用，也可以直接把switch逻辑写到Slider的map回调里：

const toolList = [
  ArrowsTool.name,
  ZoomTool.name,
  GridTool.name,
  CropTool.name,
];

return (
  <Slider>
    {toolList.map((name) => {
      switch (name) {
        case ArrowsTool.name:
          return <ArrowsToolComponent key={name} color={color} />;
        case ZoomTool.name:
          return <ZoomTool key={name} color={color} />;
        case GridTool.name:
          return <GridToolComponent key={name} color={color} />;
        case CropTool.name:
          return <CropToolComponent disabled={this.props.disabled} key={name} color={color} />;
        default:
          return null;
      }
    })}
  </Slider>
);

补充说明 #

• 每个Slider子元素都需要唯一的key，用工具名称作为key是很合适的选择（因为名称本身是唯一的）
• 如果你想保留原来的foo方法，可以直接改造它接收name参数，然后在Slider里调用：

public foo = (name: any) => { 
  const disabled = this.props.disabled; 
  const color = /* 你的颜色值来源，比如this.props.color */;
  switch (name) { 
    case ArrowsTool.name: return <ArrowsToolComponent key={name} color={color}/>; 
    case ZoomTool.name: return <ZoomTool key={name} color={color}/>; 
    case GridTool.name: return <GridToolComponent key={name} color={color}/>; 
    case CropTool.name: return <CropToolComponent disabled={disabled} key={name} color={color}/>; 
    default: return null; 
  } 
};

// 在Slider中调用改造后的foo方法
return (
  <Slider>
    {toolList.map((toolName) => this.foo(toolName))}
  </Slider>
);

这样就能完美实现你想要的图标滑块效果啦～

内容的提问来源于stack exchange，提问作者Angella Cephus