Day20-Props

前言

昨日我们介绍函式组件如何使用，并且学会了JSX灵活的操作。

今天我们来学习很重要的传递资料Props。

Props

当我们把页面切割成许多组件时，本身希望组件可以被重复利用，所以我们不会把资料写死在组件中。

那我们要怎麽把资料传给组件并且渲染呢???

答案就是使用Props传递给子组件

首先

1. 在src下建立两个folder
   • View
   • Components

2. View中建立App.js
3. Components中建立Child.js
   
4. 在App.js中引入Child组件
   而我们怎麽使用引入的组件呢???

使用<Child />或是<Child> </Child>

import Child from '../Components/Child'

function App() {
  const name = 'Ian'
  return (
    <div className="App">
      <h1>App page</h1>
      <Child />
    </div>
  );
}
export default App;

5. 定义name = 'Ian'，并且把name变数传递给nameProps

//App.js
import Child from '../Components/Child' 

function App() {
  const name = 'Ian'
  return (
    <div className="App">
      <h1>App page</h1>
      <Child name={name}/>
    </div>
  );
}
export default App;

6. 在Child中取用参数props

我们把props打印出来看看

//Child.js
import React from 'react'

function Child(props) {
  console.log(props);
  return (
    <div>
    </div>

  )
}

export default Child

// Child.js
import React from 'react'

function Child(props) {
  return (
    <div>
     My name is : {props.nameProps}
    </div>
  )
}

export default Child

既然我们知道传递的Props是个物件，我们就可以使用ES6的解构赋值取出资料。

import React from 'react'

function Child({nameProps}) {
  return (
    <div>
      My name is : {nameProps}
    </div>

  )
}

export default Child

明天我们会进入State，剩下十天了，加油!!!