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。