วิธีการนำเข้าและส่งออกส่วนประกอบโดยใช้ React + ES6 + webpack

ผมเล่นไปรอบ ๆ ด้วยReactและES6ใช้และbabel webpackฉันต้องการสร้างคอมโพเนนต์หลาย ๆ ไฟล์ในไฟล์ที่แตกต่างกันนำเข้าในไฟล์เดียวและรวมเข้ากับไฟล์webpack

สมมติว่าฉันมีส่วนประกอบบางอย่างดังนี้:

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

main-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 โดยทำเช่นนั้น: นำเข้า {MyNavbar} จาก './comp/my-navbar.jsx'; ในกรณีนี้ไม่จำเป็นต้องมีค่าเริ่มต้น

การห่อส่วนประกอบด้วยวงเล็บปีกกาหากไม่มีการส่งออกเริ่มต้น:

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 นำเข้า MDN คำอธิบายสั้น ๆ เกี่ยวกับคำถามของคุณคุณสามารถทำได้:

1. ประกาศส่วนประกอบที่คุณส่งออกเป็น 'เริ่มต้น' องค์ประกอบที่โมดูลนี้ได้รับการส่งออก: export default class MyNavbar extends React.Component {และดังนั้นเมื่อนำเข้า 'MyNavbar' import MyNavbar from './comp/my-navbar.jsx';ของคุณคุณจะได้ไม่ต้องใส่วงเล็บปีกการอบ: การไม่ใส่วงเล็บปีกการอบการนำเข้าแม้ว่าจะเป็นการบอกเอกสารว่าส่วนประกอบนี้ถูกประกาศว่าเป็น 'ค่าเริ่มต้นการส่งออก' หากไม่ใช่คุณจะได้รับข้อผิดพลาด (เหมือนที่เคยทำ)

2. หากคุณไม่ต้องการประกาศให้ 'MyNavbar' ของคุณเป็นการส่งออกเริ่มต้นเมื่อส่งออก: 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";โดยที่ foo และแถบเป็นสมาชิกหลายคนในโมดูลของคุณ

อ่าน MDN doc อย่างแน่นอนมันมีตัวอย่างที่ดีสำหรับไวยากรณ์ หวังว่าสิ่งนี้จะช่วยให้มีคำอธิบายเพิ่มเติมเล็กน้อยสำหรับทุกคนที่ต้องการของเล่นที่มี ES 6 และการนำเข้า / ส่งออกส่วนประกอบใน React

ฉันหวังว่านี่จะเป็นประโยชน์

ขั้นตอนที่ 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;

มีสองวิธีในการนำเข้าส่วนประกอบในการตอบสนองและวิธีที่แนะนำคือวิธีส่วนประกอบ

1. ทางห้องสมุด (ไม่แนะนำ)
2. วิธีส่วนประกอบ (แนะนำ)

คำอธิบายรายละเอียด PFB

วิธีการนำเข้าห้องสมุด

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

สิ่งนี้ดีและมีประโยชน์ แต่ไม่เพียง แต่รวมปุ่มและ FlatButton (และการอ้างอิง) เท่านั้น แต่ยังรวมถึงไลบรารีทั้งหมดด้วย

วิธีการนำเข้าส่วนประกอบ

วิธีหนึ่งที่จะบรรเทาได้คือพยายามนำเข้าหรือต้องการเฉพาะสิ่งที่จำเป็นเท่านั้นสมมติว่าเป็นวิธีส่วนประกอบ โดยใช้ตัวอย่างเดียวกัน:

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

สิ่งนี้จะรวมเฉพาะปุ่ม FlatButton และการอ้างอิงตามลำดับเท่านั้น แต่ไม่ใช่ทั้งห้องสมุด ดังนั้นฉันจะพยายามกำจัดการนำเข้าไลบรารีทั้งหมดของคุณและใช้วิธีส่วนประกอบแทน

หากคุณไม่ได้ใช้คอมโพเนนต์จำนวนมากควรลดขนาดไฟล์บันเดิลลงอย่างมาก