iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 3
0

今天最一開始,我們要在我們的主元件中,去加入一個子元件( sub-components )。

  • Sub-component

首先,我們新增src/components目錄,並新增header.js檔案,內容如下:

import React from "react"
export default () => <h1>This is a header.</h1>

在實作上,這個檔案可能是我們在做網頁layout的header的部分,然後我們把它跟footer跟頁面內容一起塞到主元件上。

在這邊,展示如何將其引入原本的app.js中:

import React from "react"
import Header from "../components/header"
export default () => (
  <div style={{ color: `purple` }}>
      <Header />
      <h1>Hello Gatsby!</h1>
      <p>What a world.</p>
  </div>
)

首先先在app.js(主頁面)內,引入我們的Header元件,如此一來,就可以在JSX中以標籤的形式去使用它了!!


  • layout component

然而,在實際使用上,我們可能會直接去做一個layout元件,在把我們的主頁面塞進去。做法如下:
首先,把剛剛的header.js改名為layout.js,並修改內容如下:

import React from "react"
export default ({ children }) => (
  <div>
    <h1>我是header</h1>
    {children}
    <h1>我是footer</h1>
  </div>
)

app.js修改如下:

import React from "react"
import Layout from "../components/layout"
export default () => (
  <Layout>
    <p>
      我是內容
    </p>
  </Layout>
)

用gatsby develop跑起來後,看到的畫面應該長得如下圖這樣。藉由觀察,可以看到在主畫面中,被夾在<Layout>標籤中的內容(就是<p>我是內容</p>),被當成一個元件被傳進了layout.js,並且在layout.js回傳,被當作引數來放進Layout元件中。


https://ithelp.ithome.com.tw/upload/images/20190907/20111629cGAWVXZ3uN.png


今天就這樣了,明後天的話希望把react這邊做個小結,明天會提到用props把資料從父元件傳到子元件,並且怎麼去把陣列及物件型態的資料轉換成多個標籤並放進元件中。
後天應該會用函式跟react的事件監聽,做個簡單的小功能,可能是簡易版的todolist。


上一篇
Day2. React的基本用法 (一)
下一篇
Day4. React的基本用法 (三)
系列文
用Gatsby.js做出一個簡單的部落格28

1 則留言

0
yne711520
iT邦見習生 0 級 ‧ 2019-09-08 11:28:43

原來主畫面是這個樣子出現的,謝謝你把複雜的過程,解釋的簡單又明瞭。

我要留言

立即登入留言