如何不重写完整方法替换第三方Carousel组件renderIndicator的onClickHandler

有两种优雅的实现方式，都不需要重复复制默认实现的全量代码： #

方案1：包装组件默认的renderIndicator（优先推荐） #

如果第三方Carousel组件将默认渲染逻辑暴露在了defaultProps下，直接克隆默认返回的元素替换点击事件即可：

import React from 'react';
import Carousel from 'xxx-carousel';

const customRenderIndicator = (...args) => {
  // 调用默认逻辑拿到生成的DOM元素
  const defaultIndicator = Carousel.defaultProps.renderIndicator(...args);
  // 自定义点击逻辑
  const yourCustomHandler = (e) => {
    // 你的业务逻辑写在这里
    console.log('当前点击的指示器索引：', args[2]);
    // 如果需要保留组件默认的跳转行为，保留下面这行，不需要就删掉
    args[0](e);
  };
  // 克隆元素替换点击/键盘事件属性
  return React.cloneElement(defaultIndicator, {
    onClick: yourCustomHandler,
    onKeyDown: yourCustomHandler
  });
};

// 组件使用时传入自定义的渲染方法即可
<Carousel
  // 其他属性
  renderIndicator={customRenderIndicator}
/>

方案2：封装可复用的生成函数（适配未暴露默认实现的场景） #

如果组件没有对外暴露默认的renderIndicator实现，可以把默认逻辑抽成通用工厂函数，后续使用只需要传入自定义的点击逻辑：

import React from 'react';
import Carousel from 'xxx-carousel';

// 全局抽一次就行，不用每个用到的地方都复制全量逻辑
const createRenderIndicator = (customHandler) => {
  return (defaultOnClick, isSelected, index, label) => {
    const mergedHandler = (e) => {
      // 优先执行你的自定义逻辑，也可以放在defaultOnClick后面执行
      customHandler?.(e, index, isSelected);
      // 需要保留默认跳转就保留，不需要就删除
      defaultOnClick(e);
    };
    return (
      <li
        className={klass.DOT(isSelected)}
        onClick={mergedHandler}
        onKeyDown={mergedHandler}
        value={index}
        key={index}
        role="button"
        tabIndex={0}
        aria-label={`${label} ${index + 1}`}
      />
    );
  };
};

// 组件使用时只需要传入业务逻辑
<Carousel
  // 其他属性
  renderIndicator={createRenderIndicator((e, index, isSelected) => {
    // 你的业务逻辑
    console.log('点击了第', index + 1, '个指示器，是否选中：', isSelected);
  })}
/>

两种方案都只需要写一次通用逻辑，后续所有使用场景都不用重复复制默认的渲染代码。

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