組件中的props

在react中，props的特點是：
1.可以給組件傳遞任意類型的數據
2.props是只讀的對象，只能夠讀取屬性的值，無法修改對象
如過我們強行修改數據，會報錯，告訴我們該屬性是只讀屬性。

ps:在類組件中，如果寫了構造函數，應該將props傳遞給super().
否則無法在構造函數中獲取到props

函數組件-父傳子

子組件.js
const FunCom = (props) => { 
    return (
        <div>
            <h2>我是函數組件</h2>
            <p>我叫{ props.name}</p>
        </div>
    )
}
export default FunCom

頁面使用
import React from 'react';
import ReactDOM from 'react-dom'; 
<!-- 引入 -->
import FunCom from  './components/FunCom'
ReactDOM.render(<FunCom name="李大為"/>, document.getElementById('root'))

類組件-父傳子

子組件
import React from "react";
class FunCom extends React.Component{
    render() { 
        return (
            <div>
                <h2>我是函數組件</h2>
                <p>我叫{ this.props.name}</p>
            </div>
        )
    }
}
export default FunCom

頁面使用
import React from 'react';
import ReactDOM from 'react-dom'; 
<!-- 引入 -->
import FunCom from  './components/FunCom'
ReactDOM.render(<FunCom name="李大為"/>, document.getElementById('root'))

函數組件與類組件接收參數的區別

函數組件接受參數直接是：props.xxx
類組件接受參數直接是： this.props.xxx

組件可以傳遞那些值？

可以傳遞：可以傳遞數字， xxx={19}
html,函數等等....
詳細代碼如下

父組件
import React from 'react'; //這個是react這個包，我們是需要的
import ReactDOM from 'react-dom'; //這個是react的虛擬dom
import FunCom from './components/FunCom'

ReactDOM.render(<FunCom name="李大為" age={19} fn={() => { console.log('我被出發了')}} tag={<h2>我是H2</h2>}  />,
  document.getElementById('root'))

子組件
import React from "react";
class FunCom extends React.Component{
    render() { 
        console.log(this.props)
        return (
            <div>
                <h2>我是函數組件</h2>
                <p>我叫{this.props.name}</p>
                { this.props.tag}
            </div>
        )
    }
}
export default FunCom

子組件傳遞數據父組件

1.父組件提供一個回調函數(用於接受數據)
2.將該函數作為屬性的值，傳遞給子組件

兒子組件
import React from "react";
class FunCom extends React.Component{
    state = {
        msg:'兒子給父親的數據'
    }

    // 將數據傳遞給父組件
    giveFtaher = () => { 
        this.props.giveChildren(this.state.msg)
    }
    render() { 
        return (
            <div>
                <p>我是函數組件</p>
                <button onClick={this.giveFtaher}>給父組件</button>
            </div>
        )
    }
}
export default FunCom

父組件
import React from 'react'; //這個是react這個包，我們是需要的
import ReactDOM from 'react-dom'; //這個是react的虛擬dom
import FunCom from './components/FunCom'


class PartentHello extends React.Component {
  // 當點擊按鈕的收，子組件會觸發這個方法
  getMsg = (data) => {
    console.log('接收到子組件的數據',data)
  }

  render() { 
    return (
      <div>
        <p>我是主頁面</p>
        <FunCom giveChildren={ this.getMsg}></FunCom>
      </div>
    )
  }
}
ReactDOM.render(<PartentHello></PartentHello>,document.getElementById('root'))

遇見問題，這是你成長的機會，如果你能夠解決，這就是收穫。

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關註博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！