挑战 React 第十一篇

什么是 props

大家还记得我们前几篇说过 React Component吗？

Component 可为function Component or Class Component，它接收任意的参数又称之为props并且回传描述画面的 React element。

因此 props 类似可以传递的东西，而这个东西是一个物件，我觉得用实作範例比较好懂，请看以下：

实作範例

目标

利用不同的 attribute value 在传递 props 给同一个组件，最后产生出不同结果。

一、事前準备

先用语法糖创立一个专案

npx create-react-app "project-name"

在 App.js 档案里的程式码改成以下

import React from 'react';import './App.css';import Hi from './Hi';function App() {  return (    <div className="App">      <Hi />    </div>  );}export default App;

因为 App.js 档案引入 Hi Component，需创立一个 Hi.js 档案并複製以下程式码

import React, { Component} from 'react';class Hi extends Component {  render(){    return <h1>Hi Tom</h1>  }}export default Hi

yarn start 成果

二、开始学习 Props 实作

在之前的文章我们学到组件可以重複利用，我们现在要製作三个 Hi Tom，因此複製三个 Hi 组件

function App() {  return (    <div className="App">      <Hi />      <Hi />      <Hi />    </div>  );}

接着我们在 App function 传递给 Hi组件里加上 attribute name

function App() {  return (    <div className="App">      <Hi name="Tom"/>      <Hi name="Imily"/>      <Hi name="Afra"/>    </div>  );}

console.log 出来传递的内容结果

class Hi extends Component {  render(){    console.log(this.props)    return <h1>Hi Tom</h1>  }}

props 传递出来是物件，确认有 name 属性

把刚刚传递的 props.name 放到 element 里

class Hi extends Component {  render(){    return <h1>Hi {this.props.name}</h1>  }}

yarn start 结果

依据不同的 attribute value ，达到我们要的目标效果

props 是唯读的

程式码範例

import React, { Component} from 'react';class Hi extends Component {  render(){    this.props.name = 'modifyValue';    return (    <div>      <h1>Hi {this.props.name}</h1>    </div>)  }}export default Hi

网页出现 error

学习心得

我到这篇才真正懂 props 为何物，我一直以为 props 只限定于用 state 的时候把它转换成 props，很多程式码果然要靠实作才能理解发生什么事，下篇要来学习 state 我自己是蛮期待的~~Fighting!!!