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 配置認為您不應該這樣做。 該規則在文檔中進行了描述； 這只是代碼質量和風格的問題。 如果您想更改代碼以符合規則，或者如果您不想或不能，請在行、文件或配置級別禁用規則。