在嵌套组件中使用 react 组件时模块中断
Module breaks when using a react component within a nested component
我正在尝试渲染一个名为 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
相关文章:
- 聚合物是一个框架而不是一个库.如何模块化地使用web组件
- 需要来自单个JS文件的多个子模块与节点/组件.js
- 在嵌套组件中使用 react 组件时模块中断
- 手动css模块带有属性以区分组件
- 如何通过css模块将样式应用于react组件
- 当将reactjs组件作为节点模块导出到npm时,我包括jsx还是js
- 反应组件和模块导出
- 用于功能模块化的聚合物脚本专用组件
- 模块化 JS 组件中的委派模式
- ES2015 单例或服务提供商或模块,用于敲除.js组件
- 找不到模块:反应手风琴组件
- 在 React 组件中使用 CSS 模块和 webpack 构建的 Typescript
- 如何嵌套 React 组件/模块以分离 UI
- 我怎么能在React组件中使用postcss-bem和css模块或postcss-js呢
- 使用组件化模块将JS保持在页面底部的最佳实践
- AngularJS应用程序组件(模块、工厂、控制器)定义的确切工作方式
- 从typescript模块中注册Knockout.js组件视图模型
- 如何要求无状态功能组件(未知模块_createWrapper?)
- 我如何让Babel与transform-react-jsx正确转换组件没有模块.导出(供ACE编辑器使用)
- 创建可重用D3.js/jQuery数据属性组件或模块的可能性