Làm cách nào để nhập và xuất các thành phần bằng cách sử dụng gói web React + ES6 +?

Tôi đang chơi xung quanh Reactvà ES6sử dụng babelvà webpack. Tôi muốn xây dựng một số thành phần trong các tệp khác nhau, nhập vào một tệp và gói chúng lại vớiwebpack

Hãy nói rằng tôi có một vài thành phần như thế này:

my-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>
      );
    }
}

trang chính.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')
);

Sử dụng webpack và làm theo hướng dẫn của họ, tôi có main.js:

import MyPage from './main-page.jsx';

Sau khi xây dựng dự án và chạy nó, tôi gặp lỗi sau trong bảng điều khiển trình duyệt của mình:

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`.

Tôi đang làm gì sai? Làm thế nào tôi có thể nhập và xuất đúng các thành phần của mình?

Hãy thử mặc định xuất khẩu trong các thành phần của bạn:

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>
      );
    }
}

bằng cách sử dụng mặc định, bạn thể hiện rằng đó sẽ là thành viên trong mô-đun đó sẽ được nhập nếu không có tên thành viên cụ thể được cung cấp. Bạn cũng có thể bày tỏ bạn muốn nhập thành viên cụ thể được gọi là MyNavbar bằng cách thực hiện: nhập {MyNavbar} từ './comp/my-navbar.jsx'; trong trường hợp này, không cần mặc định

Đóng gói các thành phần với dấu ngoặc nếu không xuất mặc định:

import {MyNavbar} from './comp/my-navbar.jsx';

hoặc nhập nhiều thành phần từ tệp mô-đun đơn

import {MyNavbar1, MyNavbar2} from './module';

Để xuất một thành phần duy nhất trong ES6, bạn có thể sử dụng export defaultnhư sau:

class MyClass extends Component {
 ...
}

export default MyClass;

Và bây giờ bạn sử dụng cú pháp sau để nhập mô-đun đó:

import MyClass from './MyClass.react'

Nếu bạn đang tìm cách xuất nhiều thành phần từ một tệp, khai báo sẽ trông giống như thế này:

export class MyClass1 extends Component {
 ...
}

export class MyClass2 extends Component {
 ...
}

Và bây giờ bạn có thể sử dụng cú pháp sau để nhập các tệp đó:

import {MyClass1, MyClass2} from './MyClass.react'

MDN có tài liệu thực sự hay cho tất cả các cách mới để nhập và xuất các mô-đun là ES 6 Nhập-MDN . Một mô tả ngắn gọn về câu hỏi của bạn liên quan đến câu hỏi của bạn:

1. Khai báo thành phần bạn đang xuất dưới dạng thành phần 'mặc định' mà mô-đun này đang xuất: export default class MyNavbar extends React.Component {và vì vậy, khi nhập 'MyNavbar', bạn KHÔNG phải đặt dấu ngoặc nhọn quanh nó : import MyNavbar from './comp/my-navbar.jsx';. Không đặt dấu ngoặc nhọn xung quanh một lần nhập mặc dù đang nói với tài liệu rằng thành phần này được khai báo là 'mặc định xuất'. Nếu không, bạn sẽ gặp lỗi (như bạn đã làm).

2. Nếu bạn không muốn khai báo 'MyNavbar' của mình dưới dạng xuất mặc định khi xuất nó : export class MyNavbar extends React.Component {, thì bạn sẽ phải đóng gói nhập 'MyNavbar trong dấu ngoặc nhọn: import {MyNavbar} from './comp/my-navbar.jsx';

Tôi nghĩ rằng vì bạn chỉ có một thành phần trong tệp './comp/my-navbar.jsx' của mình, thật tuyệt khi biến nó thành xuất khẩu mặc định. Nếu bạn có nhiều thành phần hơn như MyNavbar1, MyNavbar2, MyNavbar3 thì tôi sẽ không đặt chúng hoặc mặc định chúng để nhập các thành phần đã chọn của mô-đun khi mô-đun không khai báo bất kỳ điều gì bạn có thể sử dụng: import {foo, bar} from "my-module";foo và thanh là nhiều thành viên của mô-đun của bạn.

Chắc chắn đọc tài liệu MDN, nó có các ví dụ tốt cho cú pháp. Hy vọng rằng điều này sẽ giúp giải thích thêm một chút cho bất kỳ ai đang tìm kiếm đồ chơi với ES 6 và nhập / xuất thành phần trong React.

Tôi hy vọng đây là hữu ích

Bước 1: App.js là (mô-đun chính) nhập Mô-đun đăng nhập

import React, { Component } from 'react';
import './App.css';
import Login from './login/login';

class App extends Component {
  render() {
    return (
      <Login />
    );
  }
}

export default App;

Bước 2: Tạo Thư mục đăng nhập và tạo tệp login.js và tùy chỉnh nhu cầu của bạn, nó tự động kết xuất thành App.js Ví dụ 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;

Có hai cách khác nhau để nhập các thành phần trong phản ứng và cách được đề xuất là cách thành phần

1. Cách thư viện (không nên dùng)
2. Cách thành phần (khuyến nghị)

Giải thích chi tiết PFB

Thư viện cách nhập

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

Điều này là tốt và tiện dụng nhưng nó không chỉ gói Nút và FlatButton (và phụ thuộc của chúng) mà toàn bộ thư viện.

Cách nhập thành phần

Một cách để giảm bớt nó là cố gắng chỉ nhập hoặc yêu cầu những gì cần thiết, giả sử cách thành phần. Sử dụng cùng một ví dụ:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

Điều này sẽ chỉ gói Nút, FlatButton và các phụ thuộc tương ứng của chúng. Nhưng không phải toàn bộ thư viện. Vì vậy, tôi sẽ cố gắng loại bỏ tất cả các nhập khẩu thư viện của bạn và sử dụng cách thành phần thay thế.

Nếu bạn không sử dụng nhiều thành phần thì nên giảm đáng kể kích thước tệp được đóng gói của bạn.