Question

在我的快速路线中，我试图传递一个要在处理SSR的渲染函数中使用的组件。

快捷路线：

import SettingsConnected from '../../../client/components/settings/settings-connected';

function accountTab(req, res, next) {
  sendToRenderApp(req, res, { profileInfo }, url, SettingsConnected);
}

渲染助手：

export const sendToRenderApp = (req, res, storeObj = {}, urlPath, componentFunc) => {
  const store = configureStore(storeObj);
  const dynamicComponent = componentFunc;

  const component = (
    <Provider store={store}>
      <React.Fragment>
        <dynamicComponent />
      </React.Fragment>
    </Provider>
  );

  const sheet = new ServerStyleSheet();
  const app = renderToString(sheet.collectStyles(component));

错误：

“ 警告：函数作为React子元素无效。如果您返回Component而不是从render返回，可能会发生这种情况。或者您可能打算调用此函数而不是返回它。” < / p>

我已经看过的东西都包含在下面的答案中，但是我不确定如何在Provider组件内部包装这样的功能？

Functions are not valid as a React child. This may happen if you return a Component instead of from render

Answer 1

回答自己的问题： 原来是客户的水合物有问题。上面的这段代码一直很好-：facepalm：

尝试动态包含用于SSR包的组件时，“函数作为React子无效”

1 个答案: