React Redux渲染连接组件

Question

我正在使用connect函数React Redux将我的商店连接到React组件。连接后我想渲染组件。这有效：

class Init extends React.Component {
  render() {
    return (
      <View /> // Is really more elaborate
    )
  }
}

将其连接到商店：

const InitPage = connect(
  state => ({
  }),
  dispatch => ({
  })
)(Init)

现在渲染它：

class App extends React.Component {
  render() {
    const content = <InitPage />

    return (
      {content}
    )
  }
}

大。这一切都有效。然而...

当我将connect放入函数内并返回连接时，如：

const getInitPage = () => {
  const InitPage = connect(
    state => ({
    }),
    dispatch => ({
    })
  )(Init)

  return InitPage
}

如果我现在尝试渲染组件：

class App extends React.Component {
  render() {
    const content = getInitPage()

    return (
      {content}
    )
  }
}

我收到错误：

Invariant Violation: React.Children.only expected to receive a single React element child.

从函数返回Redux“connected”组件的正确方法是什么？

Answer 1

如果要从函数返回组件，则需要将其呈现为

class App extends React.Component {
  render() {
    const Content = getInitPage()

    return (
      <Content/>
    )
  }
}

还要确保componentName以大写字符开头。