HTML コーダーさんに React components を storybook に追加してもらう作業をしているのですが module exports がわかりづらいので問題をつくってみました。
問題1
関数毎に export されている場合
export const One = () => ( <div>one</div> ) export const Two = () => ( <div>two</div> )
以下の記述で呼び出しができる。マルかバツか?
import { One, Two } from '../components/Export'
問題2
export default でオブジェクトに包んで返している
const Three = () => ( <div>Three</div> ) const Four = () => ( <div>Four</div> ) export default { Three, Four }
以下の記述で呼び出しができる。マルかバツか?
import Default from '../components/ExportDefault' Default.Three Default.Four
問題3
export default で関数を返している
const Five = () => ( <div>Five</div> ) export default Five
以下の記述で呼び出しができる。マルかバツか?
import Default2 from '../components/ExportDefault2' Default.Five
答え
以下で調べてみてください
create-react-app practice-es2015-exports && cd $_ getstorybook mkdir src/components
Export.js
cat << EOS > src/components/Export.js import React from 'react' export const One = () => ( <div>one</div> ) export const Two = () => ( <div>two</div> ) EOS
ExportDefault.js
cat << EOS > src/components/ExportDefault.js import React from 'react' const Three = () => ( <div>Three</div> ) const Four = () => ( <div>Four</div> ) export default { Three, Four } EOS
ExportDefault2.js
cat << EOS > src/components/ExportDefault2.js import React from 'react' const Five = () => ( <div>Five</div> ) export default Five EOS
stories
cat << EOS > src/stories/index.js import React from 'react'; import { storiesOf, action, linkTo } from '@kadira/storybook'; import { One, Two } from '../components/Export' import Default from '../components/ExportDefault' import Default2 from '../components/ExportDefault2' storiesOf('Answer', module) .add('=>', () => ( <div> <One /> <Two /> <Default.Three /> <Default.Four /> <Default2 /> </div> )); EOS