Props

20610 ワード
React Props テキストリンク

  • reactは、データを一方向に転送するしかありません。

    =>親コンポーネントからサブコンポーネントにデータをpropsとして渡すことはできますが、サブコンポーネント間でpropsを交換することはできません.
    =>DATA:上から下へ
    =>EVENT:下から上へ(逆イベントフロー:stateドラッグ&ドロップ)

  • データを構成部品に転送します.
    //App.js
function App() {
  const number = 5;

  return (
    <div>
      <MyHeader />
      <Counter initialValue={number}/>
    </div>
  );
}
    InitialValueをCounter素子としてのProperty伝達
    //Counter.js
import React, {useState} from 'react';

const Counter = (props) => {
    const [count, setCount] = useState(props.initialValue);

    const onIncrease = () => setCount(count + 1)
    const onDecrease = () => setCount(count - 1)

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}
    InitionalValueをpropsとして受信し、props.initialValueを使用

  • 番組はいくつも出してもいいです.
      //App.js
  function App() {
    return (
      <div>
        <MyHeader />
        <Counter a={1} b={2} c={3} d={4} ... />
      </div>
    );
  }

  • 送信回数が上のように多いと長くなる可能性があるので、オブジェクトとして使用できます.

  • オブジェクトを作成したら、展開演算子を使用してpropsを渡すことができます.
    => counter.jsで受信する場合、非構造化割当{ 객체에서 필요값 }しか受信できません.
    //App.js
function App() {
  const counterProps = {
  	a: 1,
    	b: 2,
    	c: 3,
    	d: 4,
    	e: 5,
    	initialValue: 6,
  }
  return (
    <div>
      <MyHeader />
      <Counter {...counterProps} />
    </div>
  );
}
    //Counter.js
import React, {useState} from 'react';

const Counter = ({ initialValue }) => {
    const [count, setCount] = useState(initialValue);

    const onIncrease = () => setCount(count + 1)
    const onDecrease = () => setCount(count - 1)

    return (
        <div>
            <h2>{count}</h2>
            <button onClick={onIncrease}>+</button>
            <button onClick={onDecrease}>-</button>
        </div>
    )
}

    • .defaultProps


    受信propsの値が定義されていない場合、エラーが発生します.
    このような状況を避けるためにdefalt値を設定します.
    //Counter.js
  import React, {useState} from 'react';

  const Counter = ({ initialValue }) => {
      const [count, setCount] = useState(initialValue);

      const onIncrease = () => setCount(count + 1)
      const onDecrease = () => setCount(count - 1)

      return (
          <div>
              <h2>{count}</h2>
              <button onClick={onIncrease}>+</button>
              <button onClick={onDecrease}>-</button>
          </div>
      )
  }
  
  Counter.defaultProps = {
  	initialValue: 0,
  }
    =>入力されたPropsがなくても0の値が得られます

    構成部品をpropsに転送できます


  • <コンテンツ>渡すアイテム</contener>

    containerタグ間のタグはcontainer propsを介して渡され、containerコンポーネントから{children}が受信される.

  • <div>{children}</div>

    Container.jsにおける庇護機能を有する<div></div>を作成し、その間に受信したprops{children}を格納する.
    • 공부하며 정리&기록하는 ._. 씅로그
    文字列内のpとyの個数
    useRef with useEffectとImage lazy loadingの適用