reactjs - 无法使用导入文件中的类

Question

我正在尝试将一个项目拆分为多个文件，当我尝试导入一个文件时，我收到此警告/错误 warning.js:36Warning: React.createElement: type 不应为 null、undefined、boolean 或 number。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。检查 Menu 的渲染方法。 warning.js:36Warning: React.createElement: type 不应为 null、undefined、boolean 或 number。它应该是一个字符串(对于 DOM 元素)或一个 ReactClass(对于复合组件)。检查 Menu 的渲染方法。 invariant.js:38 未捕获错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义。检查 Menu.(…)

的渲染方法

我试着用谷歌搜索这个问题，我看到了很多这样的帖子，但我无法解决这个问题。 这是 Menu.jsx

import React, { Component } from 'react' 
import { render } from 'react-dom'
import Link from 'react-router'

export default class Menu extends Component {
    render () {
        return (
            <ul>
                <li><Link to="test">Link1</Link></li>
                <li><Link to="test2">Link2</Link></li>
            </ul>
        )
    };
}

这里是 app.jsx

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, browserHistory } from 'react-router'
import Menu from './Menu'

const Home = React.createClass({
  render() {
    return (
      <div>
        <div className="headerNav">
          <Menu />
        </div>
        <h1>Welcome to the Home Page</h1>
        {this.props.children}
      </div>
    );
  }
});

const RestOf = React.createClass({
  render: function() {
    return (<h1>Will it get all the others ?</h1>);
  }
});

render((
  <Router history={browserHistory}> 
    <Route path="/" component={Home} > 
      <Route path="*" component={RestOf} />
    </Route> 
  </Router>
), document.getElementById('root')); 

好吧，我几乎尝试了从搜索中找到的所有内容，但不确定我在这里遗漏了什么......但我真的对这些错误感到困惑。 p.s 我真的是 React 的新手。

我注意到，如果我将 Menu 类放在 app.jsx 中并将其定义为其他类，它会正常工作。

编辑:我正在使用 webpack，所以编译 react 文件。

谢谢!

Answer 1

在我看来，问题出在 Menu.jsx 文件中从 react-router 导入的 Link。应该是这样的:

import { Link } from 'react-router'

export default class Menu extends Component {

请记下{}。 React 路由器导出一个带有 Link 键的对象。

在第二个文件中，您的导入看起来不错:

import { Router, Route, Link, browserHistory } from 'react-router'

这解释了为什么当您将 Menu 类粘贴到那里时它会起作用。

此处的提示是错误信息:

Check the render method of Menu.

因此您可以确定正在加载 Menu 类，并且错误出在您的渲染函数中。 如果找不到菜单文件，您会收到一条消息，指出菜单未定义或类似内容。