目錄

1 傳遞數據時,可以傳遞任意類型的數據

2 props是只讀的對象,不能修改傳過來對象的屬性值

3??使用類組件時,如果寫了構造函數,應該將props傳遞給super(),否則無法在構造函數中獲取到props

props的特點

1 傳遞數據時,可以傳遞任意類型的數據

(比如傳遞字符串、數字、數組、函數、JSL表達式)

?? ?字符串: 屬性加引號表示傳遞的是字符串類型
?? ?數字: {數字}表示傳遞的是數字類型
?? ?數組: {[]}可以傳遞數組
?? ?函數: {()=>{}}
?? ?JSL表達式: {<p>這是jsl表達式</p>}

代碼

import React from "react";
import ReactDOM from "react-dom";

class Hello extends React.Component {
    //2 接收數據
    render() {
        console.log(this.props)
        //調用函數
        this.props.fn();
        //解構數組:其他名字
        const [name1,name2,name3]=this.props.nameOther
        return (
            <div>
                <h1>name:{this.props.name}</h1>
                <h1>age:{this.props.age}</h1>
                <h1>其他名字:{name1},{name2},{name3}</h1>
                {this.props.tag}
            </div>
        )
    }
}


//1 傳遞數據
ReactDOM.render(<Hello
    name='妹妹'
    age={3}
    nameOther={["小糯米", "小狗狗", "嬋妹妹"]}
    fn={()=> console.log("這是一個函數")}
    tag={<p>這是jsl表達式</p>}
/>, document.getElementById("root"));

效果

?控制臺

?

2 props是只讀的對象,不能修改傳過來對象的屬性值

?報錯如下

3??使用類組件時,如果寫了構造函數,應該將props傳遞給super(),
否則無法在構造函數中獲取到props

?沒有將props傳遞給構造函數的super(), 控制臺獲取不到對象

?修改:?將props傳遞給構造函數的super()

?可以獲取到props對象了

constructor(props){
        super(props)
        console.log(props)
        //console.log(this.props)
    }