您现在的位置是：首页 >学无止境 >react组件传参(组件通讯方式)网站首页学无止境

react组件传参(组件通讯方式)

1.class组件（类组件）

一、父传子
1.父组件：

1，父组件提供要传递的state数据
2.给子组件标签添加属性，值为 state 中的数据
3.子组件中通过 props 接收父组件中传递的数据

import React, { Component } from "react";
import Child from "./classChild";

export default class Parent extends Component {
    this.state = {
      content: "父组件给子组件传的参数",
    };
  render() {
    return (
      <div>
        <Child count={this.state.content}
        />
      </div>
    );
  }
}

2.子组件

import React, { Component } from "react";

export default class Child1 extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <>
        <div>
          子组件接受到了{this.props.count}//直接通过props的方式接受父组件传来的值
        </div>
      </>
    );
  }
}

一、子传父

思路:利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
1.父组件提供一个回调函数(用于接收数据)
2.将该函数作为属性的值，传递给子组件
3.子组件通过props调用回调函数

1.父组件

import React, { Component } from "react";
import Child from "./Child";

export default class Parent extends Component {
  getChi1dMsg(msg) =>{
   console.1og("接收到子组件数据" ,msg)
   }
  render() {
    return (
      <div>
        <Child getMsg={this.getChildMsg} />//子组件
        />
      </div>
    );
  }
}

2.子组件

import React, { Component } from "react";
export default class Child1 extends Component {
      state = (
          msg:"11111"
      )
  handleclick=()=>{
    // 子组件调用父组件中传递过来的回调函数
      this.props.getMsg(this.state.msg)
  }
  render() {
    return (
      <>  
        <button onclick=this.handleclick}>点我，给父组件传递数据</button>
      </>
    );
  }
}

2.function组件(函数组件)

一、父传子
1.父组件：

import React, { useRef, useState } from 'react';
import Child from './Child';
const Parent = () => {
    const [content, setContent] = useState(3);
    return (
       <div>
        <Child Count={content}/>
      </div>
      
    );
}
export default Parent;

2.子组件

import React from 'react';
export default function SelGridCondition(props) {
  return ( 
    <div>
      <p>子组件接收到的值{props.content}</p>
    </div>
   );
})

二、子传父

思路:利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
1.父组件提供一个回调函数(用于接收数据)
2.将该函数作为属性的值，传递给子组件
3.子组件通过props调用回调函数

1.父组件

import React, { useRef, useState } from 'react';
import Child from './Child';
export default function Parent(){
   const getChi1dMsg=(msg) =>{
     console.1og("接收到子组件数据" ,msg)
    }
    return (
       <div>
        <Child getMsg={getChildMsg}/>
      </div>
      
    );
}

2.子组件

import React from 'react';
export default function SelGridCondition(props) {
  const [state, setState] = useState("11111");
  const handleclick=() =>{
      // 子组件调用父组件中传递过来的回调函数
      props.getMsg(state)
    }
  return ( 
    <div>
     <button onclick=handleclick}>点我，给父组件传递数据</button>
    </div>
   );
})