Question

我正在尝试渲染一个名为Navbar的简单嵌套React组件，但是当我在其中使用另一个组件（或本例中的Link标签）时，控制台会给我'Uncaught Error：找不到模块“../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，但除了嵌套组件，路由，构建和同步似乎工作正常。

Answer 1

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

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

在嵌套组件中使用react组件时，模块会中断

1 个答案: