微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

尝试渲染组件时类型无效

如何解决尝试渲染组件时类型无效

我正在尝试在我的 Meteor React 应用程序中使用 FlowRouter 和 react-mounter,但收到以下错误消息:

警告:React.createElement:类型无效——需要一个字符串 (对于内置组件)或类/函数(对于复合 组件)但得到:对象。

client/main.html 在正文中有这个 div:

<div id="root"></div>

带有client/main.jsx

import React from "react";
import { Meteor } from "meteor/meteor";
import { render } from "react-dom";
import { App } from "/imports/ui/App";
import "/client/router";

Meteor.startup(() => {
  render(<App/>,document.getElementById("root"));
});

client/router.jsx 有这条路线:

import React from "react";
import { FlowRouter } from "meteor/ostrio:flow-router-extra";
import { mount,withOptions } from "react-mounter";

import App from "/imports/ui/App";
import Start from "/imports/ui/Start";

const mount2 = withOptions({
  rootId: "root"
},mount);

FlowRouter.route("/",{
  name: "Start",action() {
    console.log("start");
    mount2(App,{
      content: <Start />
    });
  }
});

imports/ui/App.jsx

import React from "react";

export const App = ({content}) => {
  console.log("content",content);
  return <div>{content}</div>
};

内容打印 undefined

以及我想要渲染的 imports/ui/Start.jsx 组件:

import React from "react";

export const Start = () => (
  <div>
    start
  </div>
);

我错过了什么?

解决方法

我的问题是 /client/router.jsx 中的导入应该有大括号,例如:

import { App } from "/imports/ui/App";
import { Start } from "/imports/ui/Start";

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。