React 三大屬性之一 props的一些簡單了解

什麼是props？

官網上是這麼解釋的：When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.

意思為：

當React看到表示使用者定義元件的元素時，它會将JSX屬性作為單個對象傳遞給此元件。我們稱這個對象為“props。

顧名思義，props就是屬性的簡寫，是單個值，是在父元件中定義或已經在state中的值，并将這些值傳遞給其子元件。props本身不可變，但可以通過觸發state的變化，反過來改變props本身的值。

props的作用

作用：用于接收元件外部的資料

傳遞資料： 通過給元件标簽添加屬性

接收資料：函數元件通過 參數 props接收資料，類元件通過 this.props接收資料

props的特點

• 可以給元件傳遞任意類型的資料
• props是隻讀屬性，不能對值進行修改
• 使用類元件時，如果寫了構造函數，應該将props傳遞給super(),否則無法在構造函數中擷取到props，其他的地方是可以拿到的

props的應用場景

1，子元件調用父元件的方法

（1）子元件要拿到父元件的屬性，需要通過

this.props

方法。

（2）同樣地，如果子元件想要調用父元件的方法，隻需父元件把要被調用的方法以屬性的方式放在子元件上，

子元件内部便可以通過

“this.props.被調用的方法

”這樣的方式來擷取父元件傳過來的方法。

2，父元件調用子元件的方法

在 ReactJS 中有個叫 ref 的屬性。這個屬性就像給元件起個引用名字一樣，子元件被設定為 ref 之後（比如 ref=“xxx”）。父元件便可以通過

this.refs.xxx

來擷取到子元件了。

類元件中父元件給子元件傳遞參數

import React, { Component, Fragment } from "react";
//React的props傳參
// 父元件
class App extends Component {
  render() {
    return (
      <Fragment>
        <Child name="卡卡羅特"></Child>
      </Fragment>
    );
  }
}
// 子元件
class Child extends Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

export default App;           

複制

運作結果

類元件中父元件給子元件傳遞一個函數

import React, { Component, Fragment } from "react";
//React的props傳參
// 父元件
class App extends Component {
  render() {
    return (
      <Fragment>
        <Child name="卡卡羅特" jineng={this.bianshen}></Child>
      </Fragment>
    );
  }

  bianshen() {
    return "變身超級賽亞人";
  }
}
// 子元件
class Child extends Component {
  render() {
    return (
      <div>
        {this.props.name}
        {this.props.jineng()}
      </div>
    );
  }
}

export default App;           

複制

運作結果

函數元件中傳遞資料

<script type="text/babel">

    //props基本使用
    function ShowSaiyaren(props){
        return (
            <div>賽亞人有：{props.a} ---{props.b}</div>
        )
    }

    //使用對象進行傳遞多個資料
    let saiyaren={
        a:"卡卡羅特",
        b:"貝吉塔"
    }
       ReactDOM.render(<ShowSaiyaren{...saiyaren} />,document.getElementById("demoReact"));    

    </script>           

複制

運作結果

提示：

元件無論是使用函數聲明還是通過 class 聲明，都決不能修改自身的 props

正常情況下 props 的擁有權不屬于目前元件，是别人傳給你的，你用的時候用 props 來引用，是以修改的權限應該由上面來決定。

文章内容如有錯誤，請以官方文檔為準

最後想說，文章借鑒了很多大佬的思路，非常感謝大佬們的無私共享！