react-redux - 有条件地连接组件时“对象作为 React 子项无效”Redux 错误？

Question

USE_MOCK_PROPS仅当环境变量设置为 false时，我才尝试使用 Redux 加载组件。如果是true这样，我将在没有 Redux 的情况下渲染组件，而是使用一些模拟道具。

import React from "react";
import Page from "./page";
import { connect } from "react-redux";

const { USE_MOCK_PROPS } = process.env;

const mockProps = {
  foo: 'bar'
}

export default function() {
  if (USE_MOCK_PROPS) {
    return <Page {...mockProps} />;
  }
  const mapStateToProps = state => {
    return {
      state
    };
  };
  return connect(mapStateToProps)(Page);
}

非 Redux 部分工作正常，但是在尝试使用 Redux 时出现此错误：

对象作为 React 子对象无效（发现：对象与键 {$$typeof, type, compare, WrappedComponent, displayName}）。如果您打算渲染一组子项，请改用数组。

标签： react-redux

Answer 1

import React from "react";
import Page from "./page";
import { connect } from "react-redux";

const { USE_MOCK_PROPS } = process.env;

const mockProps = {
  foo: 'bar'
}

function mockedComponent() {
  return <Page {...mockProps} />;
}

function connectedComponent() {
  const mapStateToProps = state => {
    return {
      state
    };
  };
  return connect(mapStateToProps)(Page)
}

export default USE_MOCK_PROPS ? mockedComponent : connectedComponent()