iT邦幫忙

0

React 的 export default和export明明是兩兄弟,但卻不一樣。

React 的 export default和export明明是兩兄弟,但卻不一樣。

export default
一個js只有一個回傳值,用export default

import React from "react";
class Test extends React.Component {
    render() {
      return <h1>Hello , {this.props.name}</h1>;
    }
}

export default Test;

要接受的js檔就用

import ReactDOM from 'react-dom';

export

一個js檔放了多個回傳值,用export {Test,Test01,Test02}

import React from "react";

class Test extends React.Component {
    render() {
      return <h1>Hello , {this.props.name}</h1>;
    }
  }
  
  function Test01(props) {
    return <h1>Hello , {props.name}</h1>;
  }
  
  const Test02 =(props)=>(
      <h1>Hello , {props.name}</h1>
  )	  

  export {Test,Test01,Test02};//一個js檔輸出多個組件就用export {a,b,c}
  

要接受的js檔就用

import {Test,Test01,Test02} from './test';

export 對應的 import 需要知道 export 拋出的變量名或函數名,本例就是Test,Test01,Test02。


尚未有邦友留言

立即登入留言