React に関する備忘録

概要

React初学者の私が学習の本筋とは少し離れた知識を残す備忘録（随時更新予定）

props の受け取り方

const MyComponent = (props) => {
  return <div>{props.title}</div>;
};

// 実際にはこのように渡す
<MyComponent title="Hello" />

• props は引数名なので、他の名前でもOK：

const MyComponent = (p) => {
  return <div>{p.title}</div>;
};

• ただし、可読性のため一般的には props を使うのが推奨

---

props.children の特殊性

const Wrapper = (props) => {
  return <div>{props.children}</div>;
};

<Wrapper>
  <p>Hello</p>
</Wrapper>

• children は React が自動的に渡す特殊なプロパティ
• props.children は必ず children という名前でアクセスする必要がある（他の名前にはできない）

---

children="xxx" で渡してもタグ内の中身が優先される

<Wrapper children="Text">
  <p>Hello</p>
</Wrapper>

この場合、children="Text" と書いても、実際に props.children に入るのは <p>Hello</p> の方。

• 明示的な children= 属性は 無視される わけではないが、タグ内の中身が優先される
• children を props として明示的に渡すのは避けるのが基本