一、父子組件

React中 組件內(nèi)調(diào)用其他組件不需要進(jìn)行 類似于vue 聲明組件(components)

React 組件內(nèi)調(diào)用其他組件 直接將組件導(dǎo)入 放置在對(duì)應(yīng)的JSX 代碼中

父子組件通信(傳統(tǒng))：

1、父組件->子組件 ?通過(guò)屬性傳遞

2、子組件->父組件 ?父組件通過(guò)將自身的函數(shù)對(duì)象傳遞給子組件， 子組件執(zhí)行父組件傳遞的函數(shù)來(lái)修改/傳值操作

練習(xí)一：

Father:

import { Component } from 'react'

import Son from './Son';

class Father extends Component {

  /* constructor(props){
    super(props);

    this.state = {
      person: {
        name: '張三',
        age: 200
      }
    }
  }
 */
  state = {
    person: {
      name: '張三',
      age: 200
    },

    arr: [1,2,3]
  }

  render() {
    return (
      <div className='container'>
        <h1>Father組件:</h1>
        <ul>
          {
            this.state.arr.map( item => (
              <li key={item}>{item}</li>
            ) )
          }
        </ul>

        <hr/>

        {/* 
          通過(guò) 自定義屬性 vperson 將 this.state.person 傳遞給 Son
        
          const vadd = (e, item) => this.handleAddArray(e.vitem);

          vadd(event, 1000)
        */}
        <Son vperson={this.state.person} varr={this.state.arr} vhandle={this.handleAge.bind(this)} vadd={ (e, vitem) => this.handleAddArray(e, vitem)}/>
      </div>
    )
  }


  handleAge(){

    this.setState({
      person: {...this.state.person, age: this.state.person.age +1 }
    });
  }

  handleAddArray(e, item){
    console.log('子組件調(diào)用父組件 handleAddArray..........');
    // 向 arr 中末尾追加新元素
    this.state.arr.push(item);

    this.setState({
      arr: this.state.arr
    });

  }
}

export default Father;

Son:

import { Component } from 'react'

class Son extends Component {

  /* 
  子組件 通過(guò)constructor 函數(shù)中的props 形參 接受 父組件 傳遞的所有屬性

  注： 子組件內(nèi)不允許修改/更新 父組件所傳遞的 props
  */
  constructor(props){
    super(props);

    console.log('Son props=>', props);

  }

  render() {
    const {  vperson  } = this.props;
    return (
      <div>
        <h1 className="h1">Son</h1>
        <h3 className='h3'>
        {/*   {this.props.vperson.name}
          {this.props.varr} */}
  
          {vperson.name} --- {vperson.age}
        </h3>
        <button className="btn btn-primary" onClick={this.add.bind(this)}>增加年齡</button>

        <button className="btn btn-success" onClick={this.localadd.bind(this)}>增加arr數(shù)組元素</button>

      </div>
    )
  }

  add(){
    // 調(diào)用父組件傳遞的 handleAge 函數(shù)
    this.props.vhandle();
  }

  localadd(e){
    this.props.vadd(e, new Date().getTime());
  }
}

export default Son;

練習(xí)二：

Father:

import { Component } from 'react'

import Son from './Son';

class Father extends Component {

  state = {
    tabs : [
      {
        tid: '001',
        title: '我的',
        isActive: true
      },
      {
        tid: '002',
        title: '收藏',
        isActive: false
      },
      {
        tid: '003',
        title: '設(shè)置',
        isActive: false
      }
    ]
  }

  render() {
    const {tabs} = this.state;
    return (
      <div className="container">
        <h1>Father組件</h1>
        <hr/>
        <Son tabsProps={tabs}  changeItem={ selectedId => this.changeItem(selectedId) }/>
      </div>
    )
  }

  changeItem(selectedID){
    console.log('子組件調(diào)用父組件 changeItem 獲取tab id=>', selectedID);

    // 根據(jù) selectedID 值 匹配 this.tabs 數(shù)組中的元素 如果匹配修改isActive=true 如果不匹配 isActive=false

    this.state.tabs.forEach( item => {
      if(item.tid === selectedID) item.isActive = true;
      else item.isActive = false;
    } )

    this.setState({
      tabs: this.state.tabs
    });
  }
}

export default Father

Son:

import { Component } from 'react'

/* 
子組件接受 props 可以省略 constructor函數(shù)接受props ， 直接通過(guò) this.props獲取父組件傳遞的屬性值
*/
class Son extends Component {
  render() {
    return (
      <div>
        <h1 className="h1">Son組件</h1>

        <div className="d-flex flex-column">
          <div className="btns fs-3 text-center  w-50 d-flex justify-content-around">
           {/*  <div className="w-25 bg-danger">我的</div>
            <div className="w-25">收藏</div>
            <div className="w-25">設(shè)置</div> */}

            {
              this.props.tabsProps.map( tab => (
                <div className={'w-25 '+(tab.isActive ? 'bg-danger': '')} key={tab.tid} onClick={this.selecteItem.bind(this, tab.tid)}>{tab.title}</div>
              ) )
            }
          </div>
          <div className="content">
            {
              this.props.tabsProps.find( tab => tab.isActive ).title
            }
          </div>
        </div>
      </div>
    )
  }

  selecteItem(selectedID){
    console.log('選擇tab id=>', selectedID);
    this.props.changeItem(selectedID);
  }
}

export default Son

練習(xí)三：

props 數(shù)據(jù)類型校驗(yàn) 寫法有兩種：

1、在當(dāng)前的類中定義 一個(gè)靜態(tài)變量 ?static propTypes(該變量名稱不允許隨意修改)

2、在當(dāng)前的類之外 定義一個(gè)靜態(tài)變量 ?類名.propTypes(該變量名稱不允許隨意修改)

Father：

import { Component } from 'react';

import Son from './Son'

/* 
props 數(shù)據(jù)類型檢測(cè)
*/

class Father extends Component {

  state = {
    num: 100,
    msg: 'Hello',
    arr: [],
    isFlag: true
  }
  render() {
    const { num ,msg, arr, isFlag } = this.state;
    return (
      <div>
        <h1>Father:</h1>
        <hr/>
        <Son pnum={num} pmsg={msg}  pisFlag={isFlag}/>
      </div>
    )
  }
}

export default Father

Son:

import React, { Component } from 'react';

import FatherPropTypes from 'prop-types';


class Son extends Component {

  /* static propTypes = {
    pnum: FatherPropTypes.number, //數(shù)據(jù)類型 number
    pmsg: FatherPropTypes.string,
    parr: FatherPropTypes.array.isRequired, //必填屬性
    pisFlag: FatherPropTypes.bool
  } */

  render() {
    const {pnum, pmsg, parr, pisFlag} = this.props;
    return (
      <div>
        <h1>Son:</h1>
        <h6>pnum:{pnum}</h6>
        <h6>pmsg:{pmsg}</h6>
        <h6>parr:{parr}</h6>
        <h6>pisFlag:{pisFlag}</h6>
      </div>
    )
  }
}

Son.propTypes = {
  pnum: FatherPropTypes.number, //數(shù)據(jù)類型 number
  pmsg: FatherPropTypes.string,
  parr: FatherPropTypes.array.isRequired, //必填屬性
  pisFlag: FatherPropTypes.bool
}


export default Son;

練習(xí)四:

props 默認(rèn)值設(shè)置 寫法有兩種：

1、在當(dāng)前的類中定義 一個(gè)靜態(tài)變量 ?static defaultProps(該變量名稱不允許隨意修改)

2、在當(dāng)前的類之外 定義一個(gè)靜態(tài)變量 ?類名.defaultProps(該變量名稱不允許隨意修改)

什么時(shí)候調(diào)用默認(rèn)值:

1、傳遞的prop 原本的值為 undefined 則調(diào)用 默認(rèn)值

2、沒(méi)有傳遞 prop 則調(diào)用 默認(rèn)值文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-715505.html

Father:

import { Component } from 'react';

import Son from './Son'

/* 
props 默認(rèn)值設(shè)置
*/

class Father extends Component {

  state = {
    num: undefined,
    msg: undefined,
    arr: undefined,
    isFlag: undefined
  }
  render() {
    const { num ,msg, arr, isFlag } = this.state;
    return (
      <div>
        <h1>Father:</h1>
        <hr/>
        <Son pnum={num} pmsg={msg} parr={arr} pisFlag={isFlag}/>
      </div>
    )
  }
}

export default Father

Son:

import React, { Component } from 'react';



class Son extends Component {

  /* static defaultProps = {
    pnum: -1,    //FatherPropTypes.number, //數(shù)據(jù)類型 number
    pmsg: '沒(méi)有文字',//FatherPropTypes.string,
    parr:  [-100, -200, -300],//FatherPropTypes.array.isRequired, //必填屬性
    pisFlag: false
  } */

  render() {
    const {pnum, pmsg, parr, pisFlag} = this.props;
    return (
      <div>
        <h1>Son:</h1>
        <h6>pnum:{pnum}</h6>
        <h6>pmsg:{pmsg}</h6>
        <h6>parr:{parr}</h6>
        <h6>pisFlag:{pisFlag}</h6>
      </div>
    )
  }
}

Son.defaultProps = {
  pnum: -1,    //FatherPropTypes.number, //數(shù)據(jù)類型 number
    pmsg: '沒(méi)有文字',//FatherPropTypes.string,
    parr:  [-100, -200, -300],//FatherPropTypes.array.isRequired, //必填屬性
    pisFlag: false
}


export default Son;

Son1:

import PropTypes from 'prop-types'
import { Component } from 'react'

/* 
props 進(jìn)行類型檢測(cè)與默認(rèn)值設(shè)置
*/

class Son1 extends Component {
  static propTypes = {}

  static defaultProps = {}

  render() {
    return (
      <div>Son1</div>
    )
  }
}

export default Son1

到了這里，關(guān)于react 組件之間的通信（父子組件）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！