javascript - 当我在渲染中包装组件时，函数作为 React 子项无效

Question

当我在渲染中包装组件时出现此错误。

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

这是我在 index.js 中的代码

const aa = DragDropContext(HTML5Backend)(<Provider store={store}>
<Container />
</Provider>);
ReactDOM.render(
  aa,
  document.getElementById('root')
);

Answer 1

应该是这样的:

class App extends React.Component {
  render() {
    return <div>App</div>;
  }
}
const WrappedApp = DragDropContext(HTML5Backend)(App)

const aa = <Provider store={store}>
              <WrappedApp />
           </Provider>

ReactDOM.render(
  aa,
  document.getElementById("root")
);

根据错误:

Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

以及DropDropContext的规范，那么它是一个函数并且..

DragDropContext wraps your component and returns another React component.

这是有道理的。那么，我们将首先调用该函数，以接收包装的组件:

const WrappedApp = DragDropContext(HTML5Backend)(App)

然后我们继续使用 Provider 来包装该包装的组件。

const aa = <Provider store={store}>
              <WrappedApp />
           </Provider>

然后使用它

ReactDOM.render(
  aa,
  document.getElementById("root")
);

这是演示:https://codesandbox.io/s/53zm08m5pn