Props
Props（properties）是父元件傳給子元件的輸入，像函式參數。子元件用它們來渲染，不要修改收到的 props；要變的資料用 state。
怎麼傳、怎麼接
父元件在標籤上寫屬性，子元件用參數接：
function UserCard({ name, role }) {
return (
<article>
<h2>{name}</h2>
<p>{role}</p>
</article>
);
}
function App() {
return (
<>
<UserCard name="Ada" role="工程師" />
<UserCard name="Lin" role="設計師" />
</>
);
}
name="Ada" 是字串。傳數字、布林、物件、函式時用大括號：count={3}、active={true}、onSave={handleSave}。
也可以先組物件再展開，效果相同：
初學時展開寫法較難追資料從哪來，能寫清楚屬性就先寫清楚。
children
標籤中間的內容會變成 props.children：
function Panel({ title, children }) {
return (
<section>
<h2>{title}</h2>
{children}
</section>
);
}
<Panel title="公告">
<p>系統將於午夜維護。</p>
</Panel>
這就是卡片、版面、按鈕能包住任意內容的原因。
只往下流
資料預設由上往下。UserCard 不能改 App 裡的變數；它若要通知上層（例如按下刪除），上層必須傳一個函式進來：
function UserCard({ name, onRemove }) {
return (
<article>
<h2>{name}</h2>
<button type="button" onClick={onRemove}>
移除
</button>
</article>
);
}
兩個兄弟元件要看同一份資料時，把 state 放到共同的父元件，見 提升 State。