React HOC ESLint 错误：禁止传播道具

Question

是 eslint 不够聪明吗？ HOC 非常通用，因此我无法真正指定传入的选项/道具，因为它是动态的，具体取决于此 HOC 在任何给定时间包装的组件。

props spreading is forbidden

withTracker.tsx

const withTracker = (WrappedComponent: any, options: any = {}) => {
    options.cookieDomain = 'xxxx';
    const trackPage = (page: any) => {
        GoogleAnalytics.set({
            page,
            ...options,
        });
        GoogleAnalytics.pageview(page);
    };

    const HOC = class HOC extends Component <{ location: any }> {
        componentDidMount() {
            const page = this.props.location.pathname;
            trackPage(page);
            window.scrollTo(0, 0);
        }

        componentDidUpdate(prevProps: any) {
            const currentPage = prevProps.location.pathname;
            const nextPage = this.props.location.pathname;

            if (currentPage !== nextPage) {
                trackPage(nextPage);
            }
        }

        render() {
            return <WrappedComponent {...this.props} />;
        }
    };

    return HOC;
};

export default withTracker;

Answer 1

只需禁用文件或特定行的 eslint 规则。

render(){
  // eslint-disable-next-line react/jsx-props-no-spreading
  return <WrappedComponent {...this.props} />
}

Answer 2

大概没有理由不能传播这些道具； 只是您的 ESLint 配置认为您不应该这样做。 该规则在文档中进行了描述； 这只是代码质量和风格的问题。 如果您想更改代码以符合规则，或者如果您不想或不能，请在行、文件或配置级别禁用规则。