javascript - 为什么此错误显示 : "A valid React element (or null) must be returned. You may have returned undefined"

Question

我知道这个问题已经得到解答，但我就是无法处理到底出了什么问题。我有一个包装函数:

const withTracker = (WrappedComponent, partnerTrackingCode, options = {}) => {
  const trackPage = (page) => {
    ReactGA.set({
      page,
      options
    });
    ReactGA.pageview(page);
  };

  class HOC extends Component {
    componentDidMount() {
      ReactGA.initialize(partnerTrackingCode);
      const page = this.props.location.pathname;
      trackPage(page);
    }

    componentWillReceiveProps(nextProps) {
      const currentPage = this.props.location.pathname;
      const nextPage = nextProps.location.pathname;

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

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

  return HOC;
};

export default withTracker;

我在这里调用它:

export default (props) => {
  const MainComponent = (
    <div>
      ...
    </div>
  );
  if (props.partnerTrackingCode) {
    return (
      withTracker(MainComponent, props.partnerTrackingCode)
    );
  }
  return (<div />);
};

当定义跟踪代码并调用 withTracker 时，即使 mainComponent 是一个组件，它也会显示此错误:必须返回有效的 React 元素(或 null)。您可能返回了未定义的数组或其他无效对象我还尝试用空 div 替换 WrappedComponent:

return(<div />)

但还是同样的错误

Answer 1

看起来您在这里混淆了元素和组件。您正在传递元素(您想要渲染的实际输出)，而 HOC 是一个组件(通常采用一组 Prop 并返回一个元素的函数)。您将一个元素传递给 HOC，因此当它尝试渲染它(在 HOC 渲染函数中)时，它无法渲染它，并且您会收到错误。

要解决这个问题，您首先需要将 MainComponent 变成一个实际的组件，而不仅仅是您希望它返回的元素，例如:

const MainComponent = props => (
  <div>
    ...
  </div>
)

然后将其与您想要包装并渲染的包装器一起使用:

if (props.partnerTrackingCode) {
  const MainWithTracker = withTracker(MainComponent, props.partnerTrackingCode)
  return <MainWithTracker />;
}

但这有点奇怪，因为您需要在渲染方法中创建包装组件，这不是您通常做事的方式。更改 HOC 可能更有意义，以便它返回一个将 PartnerTrackingCode 作为 prop 而不是 HOC 参数的组件。大致如下:

// your HOC (omitting irrelevant bits)
const withTracker = (WrappedComponent, options = {}) => {

  ...

  class HOC extends Component {
    componentDidMount() {
      ReactGA.initialize(this.props.partnerTrackingCode);
      ...
    }

    ...

    render() {
      // pull out the tracking code so it doesn't get passed through to the
      // wrapped component
      const { partnerTrackingCode, ...passthrough } = this.props;
      return <WrappedComponent {...passthrough} />;
    }
  }

  return HOC;
};

// in your component
const MainComponent = props => (
  <div>
    ...
  </div>
);
const MainWithTracker = withTracker(MainComponent);

export default (props) => {
  if (props.partnerTrackingCode) {
    return (<MainWithTracker partnerTrackingCode={props.partnerTrackingCode} />);
  }
  return (<div />);
};

(我认为这不是最好的方法，我只是尝试尽可能接近您的代码。一旦您开始重组它，您就可以更好地了解您正在尝试的内容为此，您可能会找到更好的组织方式。)