我正在玩React
和ES6
使用babel
和webpack
。我想在不同的文件中构建几个组件,导入一个文件并用webpack
捆绑它们
假设我有几个这样的组件:
我-navbar.jsx
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}
主page.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import MyNavbar from './comp/my-navbar.jsx';
export class MyPage extends React.Component{
render(){
return(
<MyNavbar />
...
);
}
}
ReactDOM.render(
<MyPage />,
document.getElementById('container')
);
使用webpack并按照他们的教程,我有main.js
:
import MyPage from './main-page.jsx';
构建项目并运行它后,我在浏览器控制台中收到以下错误:
Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `MyPage`.
我究竟做错了什么?如何正确导入和导出组件?
尝试默认组件中的导出:
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
export default class MyNavbar extends React.Component {
render(){
return (
<Navbar className="navbar-dark" fluid>
...
</Navbar>
);
}
}
通过使用默认值,您表示将成为该模块中的成员,如果未提供特定成员名称,则将导入该模块。您还可以通过以下方式表达您要导入名为MyNavbar的特定成员:从'./comp/my-navbar.jsx'导入{MyNavbar};在这种情况下,不需要默认值
如果没有默认导出,则使用大括号包装组件:
import {MyNavbar} from './comp/my-navbar.jsx';
或从单个模块文件导入多个组件
import {MyNavbar1, MyNavbar2} from './module';
要在ES6中导出单个组件,可以使用export default
,如下所示:
class MyClass extends Component {
...
}
export default MyClass;
现在,您使用以下语法导入该模块:
import MyClass from './MyClass.react'
如果您要从单个文件中导出多个组件,声明将如下所示:
export class MyClass1 extends Component {
...
}
export class MyClass2 extends Component {
...
}
现在您可以使用以下语法导入这些文件:
import {MyClass1, MyClass2} from './MyClass.react'
MDN有非常好的文档,所有导入和导出模块的新方法是ES 6 Import-MDN。关于你的问题的简要说明你可以:
export default class MyNavbar extends React.Component {
,因此在导入“MyNavbar”时,您不必在其周围放置花括号:import MyNavbar from './comp/my-navbar.jsx';
。虽然没有在导入周围放置大括号,但是告诉文档该组件被声明为“导出默认值”。如果不是你会得到一个错误(就像你做的那样)。export class MyNavbar extends React.Component {
,那么你必须将'MyNavbar的导入包装成花括号:import {MyNavbar} from './comp/my-navbar.jsx';
我认为既然你的'./comp/my-navbar.jsx'文件中只有一个组件,那么将它作为默认导出就很酷了。如果你有更多的组件,比如MyNavbar1,MyNavbar2,MyNavbar3,那么我不会将它们或者它们作为默认值,并且当模块没有声明任何一个默认值你可以使用时,导入模块的选定组件:import {foo, bar} from "my-module";
where foo和bar是模块的多个成员。
绝对阅读MDN文档,它有很好的语法示例。希望这有助于为任何想要在React玩具ES 6和组件导入/导出的人提供更多解释。
我希望这是有帮助的
步骤1:App.js是(主模块)导入登录模块
import React, { Component } from 'react';
import './App.css';
import Login from './login/login';
class App extends Component {
render() {
return (
<Login />
);
}
}
export default App;
第2步:创建登录文件夹并创建login.js文件并自定义您的需求它自动呈现给App.js示例Login.js
import React, { Component } from 'react';
import '../login/login.css';
class Login extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default Login;
在react中导入组件有两种不同的方法,推荐的方法是组件方式
PFB详细说明
图书馆的进口方式
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';
这很好用,但它不仅捆绑了Button和FlatButton(及其依赖项),而且整个库。
组件导入方式
缓解它的一种方法是尝试仅导入或需要所需的东西,让我们说组件方式。使用相同的例子:
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';
这只会捆绑Button,FlatButton及其各自的依赖项。但不是整个图书馆。所以我会试图摆脱你所有的库导入并改用组件方式。
如果您没有使用大量组件,那么它应该大大减少捆绑文件的大小。