在嵌套组件中使用反应组件时模块中断答案

【问题标题】：Module breaks when using a react component within a nested component在嵌套组件中使用反应组件时模块中断
【发布时间】：2015-03-13 02:11:27
【问题描述】：

我正在尝试渲染一个名为 Navbar 的简单嵌套 React 组件，但是当我在其中使用另一个组件（或在本例中为 Link 标签）时，控制台给了我“未捕获的错误：找不到模块“../Navbar” '。如果我删除 Link 标签，则会显示 h1 标签并且没有错误。我可以在 App 组件中使用 Link 标签，所以我知道它应该在项目中工作。

我的 App.js 代码如下所示：

import React from 'react';
import Navbar from '../Navbar';
import { RouteHandler, Link } from 'react-router';

export default React.createClass({

  render: function() {
    return (
      <div className='App'>
        <Link to="about">About</Link>
        <Navbar />
        <RouteHandler />
      </div>
    );
  }

});

我的 Navbar.js 代码如下所示：

import React from 'react';
import { PureRenderMixin } from 'react/addons';
import { Link } from 'react-router';

export default React.createClass({
  mixins: [PureRenderMixin],

  render: function () {
    return (
      <h1>Navbar</h1>
      <Link to="about">About</Link>
    );
  }
});

我正在使用 React-Router、Webpack 和 Browser-Sync，但除了嵌套组件之外，路由、构建和同步似乎工作正常。

【问题讨论】：

NavBar.js 是否位于app.js 文件中上的一个文件夹？你正在使用../。
是的，组件位于带有 JS 和 package.json 文件的 /components 下的单独文件夹中。我知道如果我在 Navbar 中注释掉 //About ，它会找到 Navbar b/c 一切正常。
不应该是'./components/Navbar'吗？

标签： javascript reactjs react-router

【解决方案1】：

Navbar 中的渲染方法试图同时返回两个值，<h1> 和 <Link>。这是一个语法错误。您需要将它们包装在一个元素中，例如<div>。

另见http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html

【讨论】：

不敢相信我没有意识到这一点。谢谢！