繁体   English   中英

React.createElement:类型无效-预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到了:对象

React.createElement: type is invalid — expected a string (for built-in components) or a class/function (for composite components) but got: object

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在使用React和Node构建一个登录应用程序。 我使用Babel和Webpack进行转译和捆绑。 在React端,我在节点端使用ES6模块系统和Commonjs模块。

该应用程序在客户端运行良好,但是当我打算添加服务器端渲染时,出现了以上错误。

经过研究,我发现这可能是MainRouter的导入,使用“导出默认值”导出了模块,因此我添加了这行“ const MainRouter = require('../ client / MainRouter')。default”。 添加此错误后,错误消失了,但应用程序什么也不显示。

下面是我的代码:

express.js

 `
// server side rendering module
const React = require("react");
const ReactDOMServer = require("react-dom");
const StaticRouter = require("react-router-dom").StaticRouter;  
const MainRouter = require("../client/MainRouter")
console.log(require("../client/MainRouter"))

const { SheetsRegistry, JssProvider } = require("react-jss");

const {
  MuiThemeProvider,
  createMuiTheme,
} = require("@material-ui/core/styles");
const { indigo, pink } = require("@material-ui/core/colors");
const Template = require("./../template");
app.get("*", (req, res) => {
  const sheetsRegistry = new SheetsRegistry();
  const theme = createMuiTheme({
    palette: {
      primary: {
        light: "#757de8",
        main: "#3f51b5",
        dark: "#002984",
        contrastText: "#fff",
      },
      secondary: {
        light: "#ff79b0",
        main: "#ff4081",
        dark: "#c60055",
        contrastText: "#000",
      },
      openTitle: indigo["400"],
      protectedTitle: pink["400"],
      type: "light",
    },
  });

  const context = {};
  const markup = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <JssProvider
        registry={sheetsRegistry}
      >
        <MuiThemeProvider theme={theme}>
          <MainRouter />
        </MuiThemeProvider>
      </JssProvider>
    </StaticRouter>
  );

  

  if (context.url) {
    return res.redirect(303, context.url);
  }
  const css = sheetsRegistry.toString();
  res.status(200).send(Template({ markup, css }));
});
`

Template.js

    module.exports = ({ markup, css}) => {
    return `<!doctype html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>MERN Skeleton</title>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
           
            <style> a { text-decoration: none}</style>
        </head>
        <body style="margin:0">
            <div id="root">${markup}</div>
            <style id="jss-server-side">${css}</style>
            <script type="text/javascript" src="/dist/bundle.js">
            </script>
        </body>
        </html>
    `

}

如果有人能指出我正确的方向,我将不胜感激。 提前致谢。

问题暂未有回复.您可以查看右边的相关问题.
3 React.createElement:类型无效——期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但未定义

我刚刚开始学习如何使用 React Native 创建应用程序。 在了解了 Stack Navigator 之后,我尝试尝试一下,但我收到了这个错误。 警告:React.createElement:类型无效——需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:%s.%s%s,未定义 ...

8 ReactJs:元素类型无效:预期是字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义

我正在使用 @react-pdf-viewer 库来显示 PDF 我也在使用 @react-pdf-viewer/get-file 其中我正在使用下载按钮来自定义它。 但是在运行测试用例时,我收到“下载”的错误为“元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定 ...

2021-05-05 11:56:51 0 51   reactjs
10 React - 错误:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义

第二天我已经不明白我的错误是什么,在我显示代码之前,请查看完整的错误 我研究了各种论坛,包括 stackoverflow,但没有任何建议能够解决我的错误 我有三个文件TasksHoc, Introduction 和 Routes 。 我正在将一个组件从 TasksHoc 导入到 Introduc ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM