Props

9612 ワード
親構成部品 構成部品 サブエレメント React データ#データ# Props テキストリンク

Props


  • 親構成部品から子構成部品へのデータ送信を許可する方法
    ex)ある会社がアプリケーションを作成したい.
    - 다양한 버튼들이 필요 (로그인, 변경, 확인 등등)
- 다양한 버튼들이 있지만 버튼의 모습은 같음 ==> <span style="color:red">리액트 컴포넌트를 재사용하고 싶음</span>

  • 再使用前のコード
    function SaveBtn(){
  return <button style={{
    fontSize: 18,
  }}>Save Changes</button>
}

function ConfirmBtn(){
  return <button style={{
    fontSize: 16,
  }}>Confirm</button>
}

function App(){
  return (
    <div>
   	  <SaveBtn />
      <ConfirmBtn />
    </div>
  )
}

  • 繰り返し使用コード(構成部品)
    function Btn({text ,big}){
  return <button style={{
    fontSize: big ? 18 : 16,
  }}>{text}</button>
}

function App(){
  return (
    <div>
      //   
      <Btn text="Save Changes" big={true} />
      <Btn text="Confirm" big={false} />
    </div>
  )
}

    • Memo


  • 親構成部品の再レンダリング
    function Btn({text, changeValue}){
  return(
    <button onClick={changeValue}>
   	  {text}
    </button>
  );
}

function App(){
  const [value, setValue] = React.useState("Save Change");
  const changeValue = () => setValue("Revert Changes")
  return (
    <div>
      // 여기에 onClick해도 이벤트리스너가 아니라 props이름.
   	  <Btn text={value} changeValue={changeValue} />
      <Btn text="Continue" />
    </div>
  )
}

  • ボタン=>親構成部品のステータスの変更(ステータス)をクリックします.

  • ステータスの変更=>すべてのコンテンツが再表示されます

  • ボタンを押す前に


  • React Memo

  • Propsが変更されていない場合は、レンダリングは行われません.
    function Btn({text, changeValue}){
}

const MemorizedBtn = React.memo(Btn)
function App() {
  return (
    <div>
      <MemorizedBtn />
      <MemorizedBtn />
    </div>
  )
}


    • Prop Types


  • React Propsは任意のタイプのPropを送信できます.

  • 問題は、エラーの柱が伝わってもRECT JSからエラーメッセージが出ないことです.

  • PropTypeで解決
    <script src="https://unpkg.com/[email protected]/prop-types.js"></script>

Btn.propTypes = {
  text: PropTypes.string,
  fontSize: PropTypes.number,
}

  • 文書:https://ko.reactjs.org/docs/typechecking-with-proptypes.html

  • propsなしでデフォルト値を設定する
    function Btn({text, fontSize = 16}){
}
    • より良いAltテキストを書く5つの方法
    シャドウガス- V 1.1.0