从对象值渲染 React 元素

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：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件。

是否可以用这种方式渲染 React 组件？

Answer 1

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

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

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

Answer 2

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

因此，在声明 RouteObj 后添加：

export default RouteObj;

如错误所示，您尝试使用未导出的内容。因此它是未定义的。

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

所以，comp 应该是这样的：

comp: Registration