Web_React #20

5530 ワード
React web テキストリンク
210826
Web_React #20
  • children
    • -Button.js
    function Button({text}) {
  return <button>{text}</button>
}

export default Button
    buttonというラベルにtextというpropが表示されます.
    -App.js
    import Button from './button';
import Dice from './Dice';

function App() {
    return (
      <div>
        <div>
          <Button text="던지기" />
          <Button text="처음부터" />
        </div>
        <Dice color="red" num = {2} />
      </div>
    )
}

export default App;
    Buttonをインポートした後、divラベルに2つのButtonを作成します.

    このように単純に機能するのは道具よりも直感的に子供の道具を利用することである.
    -Button.js
    function Button({children}) {
  return <button>{children}</button>
}

export default Button
    textをサブテキストに変更
    -App.js
    import Button from './Button';
import Dice from './Dice';

function App() {
    return (
      <div>
        <div>
          <Button>던지기</Button>
          <Button>처음부터</Button>
        </div>
        <Dice color="red" num = {2} />
      </div>
    )
}

export default App;
    Buttonタグの作成と同様に使用

    リファレンス
    https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react
    雑誌式
    jQuery_3. 選択者