从对象值渲染 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>
  }
}