Question

我想创建一个对象：

import React from "react";
import { Registration } from "../../";

const RouteObj = {
  Registration: {
    route: "/registration",
    comp: <Registration />
  }
};
export default RouteObj;

然后，在第二个文件调用中：

import React from 'react';
import RouteObj from ...

class Thing extends React.Component{
  render() {
    <RouteObj.Registration.comp />
  }
}

尝试此操作时，我收到错误：

React.createElement：type无效 - 期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。

是否可以以这种方式呈现React组件？

Answer 1

Registration已经是一个标记（一个组件），这就是为什么我猜你必须使用大括号。

import React from 'react';
import RouteObj from ...

class Thing extends React.Component{
  render() {
    <div>
      {RouteObj.Registration.comp}
    </div>
  }
}

Answer 2

您必须正确导出RouteObj，作为默认导出。

因此，在声明RouteObj：

export default RouteObj;

你试图使用你没有导出的东西，正如错误所说。因此未定义。

您无法从元素创建元素，您需要从组件类创建元素。因此，您必须将RouteObj.comp设置为Registration，即组件类本身，而不是Registration，<Registration />的实例。

所以，相反，这就是comp应该是：

comp: Registration

从对象值

2 个答案: