【React 新手村】Props

原文發表於 Medium。

延續上一篇的內容

function App() {
return (
<div>
<h1>My Todos</h1>
<Todo content={"No1"} />
<Todo content={"No2"} />
<Todo content={"No3"} />
</div>
);
}
export default App;

在上述Code，<Todo>標籤中的No1~No3如何分別被各自的Component接收?這就必須要針對Component內容進行編輯了。

function Todo(props) {
return (
<div className="card">
<h2>{props.content}</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>
);
}
export default Todo;

仔細觀察以上的code，可以發現在function中我加入了props參數，這個props內容將會是一個object，內容包括了所有在上層中在Tag標籤中輸入的參數。

在這個案例

<Todo content={"No1"} />

的props的object內容是：

{content: "No.1"}

所以在上層的component資料可以透過Tag標籤來將資料傳輸到下層的component。

那麼拿到的資料要怎麼應用在component中呢？各位可以注意到案例中的<h2>內容，我們就將props object中的content值給取出，然後記得要用** 花括號** 將它包圍住。

使用花括號是為了告訴React這段是Javascript程式碼。

使用花括號是為了告訴React這段是Javascript程式碼。

如此一來，就可以重複利用component，用來呈現不同的資料內容。

上述的Code渲染的結果

重要

有時多個Component要一一渲染的項目可能很多，若每個渲染項目都要手動加入app.js就太費事了，因此app.js的內容還有更佳優雅的寫法：

import Todo from "./Todo";
function App() {
const data= ["No1","No.2","No.3"]
return (
<div>
<h1>My Todos</h1>
{data.map((str)=><Todo content={str}/>)}
</div>
);
}
export default App;

簡單來說，就是利用ES6之後的語法map()，將一串資料array的個別資料內容都套上Component，然後呈現在DOM中。這乍看是一種權宜之計，但經過寫了幾個React 專案下來，我發現這是React的基本馬步。

因為前端工作有很大的一部分是串接API來獲取資料，要將成堆的資料依次渲染在畫面中，最佳方式就是利用可迭代的資料格式(array)來進行內容輸出。

寫到這也有點累了，希望你喜歡。稍作休息，等等再出發！