React資料通信父傳子和子傳父的使用

元件中的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'))      

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