Reactのpropsについて

React の props

親コンポーネントから子コンポーネントへ値を渡したいときの props の渡し方を
メモ用に書いておく

props の渡し方

App.js

export default function App() {
  /* 省略 */
  return (
    <div>
      <MyList color="blue" listTxt="hello"></MyList>
    </div>
  );
}

01 props を受け取って、props.~ と記述する方法

MyList.jsx

export const MyList =(props)={

  const listStyle = {
    color:props.color,
  }

  return(
    <div>
      <ul>
        <li style="listStyle">{props.listTxt}</li>
      </ul>
    </div>
  )
}

props が何個もあるときなどに props を何回も記述するのは面倒

02 props を分割代入する方法

MyList.jsx

export const MyList =(props)={
  const {color,listTxt} = props;

  const listStyle = {
    // プロパティ名と値が同じ場合は省略可能
    color,// → color:color
  }

  return(
    <div>
      <ul>
        <li>{listTxt}</li>
      </ul>
    </div>
  )
}

props を書かなくていいので記述も少なくて済む

03 引数の段階で展開する

MyList.jsx

export const MyList =({color,listTxt})={

  const listStyle = {
    // プロパティ名と値が同じ場合は省略可能
    color,// → color:color
  }

  return(
    <div>
      <ul>
        <li>{listTxt}</li>
      </ul>
    </div>
  )
}

うーんあんまり好きじゃないかも。引数が追加されたときとかどんどん長くなるし

まとめ

個人的には分割代入するのがすっきりしていて好きに感じた。
でも props.~も一目で渡されてきた値だと分かるからどうなんだろう。
ほかの方の意見も聞いてみたい