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

Module breaks when using a react component within a nested component

本文关键字:组件 模块 react 中断 嵌套      更新时间:2023-09-26

我正在尝试渲染一个名为 Navbar 的简单嵌套 React 组件,但是当我在其中使用另一个组件(或本例中的链接标签)时,控制台会给我"未捕获错误:找不到模块"。/导航栏"'。 如果我删除链接标签,则会显示 h1 标签并且没有错误。 我可以在应用程序组件中使用链接标签,所以我知道它应该在项目中工作。

我的应用.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>
    );
  }
});

我的导航栏.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 和浏览器同步,但除了嵌套组件之外,路由、构建和同步似乎工作正常。

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

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