react中类组件传值，函数组件传值：父子组件传值、非父子组件传值

夜空孤狼啸

已于 2022-07-29 11:57:23 修改

阅读量1.4k

点赞数

分类专栏： React 文章标签： react.js javascript 前端 react

于 2022-03-18 11:36:35 首次发布

夜空孤狼啸

本文链接：https://blog.csdn.net/qq_43940789/article/details/123570616

版权

React 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

父子组件传值、非父子组件传值；

类组件传值

父子组件传值

子传父：

            子组件：事件的触发
            sendMsg=()=>{
                this.props.person();
            }

            父组件：
                <Child person={this.getMsg}></Child>
                getMsg=(data)=>{
                    console.log(data);
                }

父传子：

            父组件
            state = {
                num : 100
            }
            <Child num={this.state.num}></Child>
            
            子组件
                this.props.num

父子组件传值案例（导航下拉框效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件传值导航效果</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src='https://unpkg.com/babel-standalone@6.15.0/babel.min.js'></script>
    <style>
        #box{
            width: 80%;
            padding: 10px;
            margin: auto;
            outline: 1px solid red;
            overflow: hidden;
        }
        .nav{
            display: flex;
            justify-content: space-around;
        }
        .nav span{
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>

<script type="text/babel">
    class Nav extends React.Component{

        constructor(props){
            super(props);
            this.state = {
                title:['区域','价格','房型','朝向'],
                num : 0
            }
        }

        render(){
            return(
                <React.Fragment>
                    <div className="nav">
                        {
                            this.state.title.map((item,i)=>{
                                return <span key = {i} onClick={()=>{this.getindex(i)}}>{item}</span>
                            })
                        }
                    </div>
                    <NavSecond index={this.state.num} tab={this.getData}></NavSecond>
                </React.Fragment>
            )
        }

        getindex = (index)=>{
             console.log(index);             
             this.setState({
                 num:index
             })
        }

        getData = (text)=>{
            this.state.title.splice(this.state.num,1,text)
            this.setState({
                title:this.state.title
            })
            console.log(text);
        }
    }

    class NavSecond extends React.Component{

        constructor(props){
            super(props);
            this.state = {
                con:[
                    ['高新区','中原区','二七区','经开区','荥阳'],
                    ['20W','40W','60W','80W','100W'],
                    ['一室','两室','三室','四世','复式'],
                    ['朝南','朝东','朝西','朝北']
                ]
            }
        }

        render(){
            return (
                <React.Fragment>
                    {
                        this.state.con[this.props.index].map((item,i)=>{
                            return <p key = {i} onClick={()=>{this.sendData(item)}}>{item}</p>
                        })
                    }    
                </React.Fragment>
            )
        }

        sendData=(text)=>{
            this.props.tab(text);
        }
    }


    ReactDOM.render(<Nav/>,document.querySelector('#box'));
</script>
</html>

非父子组件传值

    **方法：
    1）redux 公共池（只能使用在脚手架中）
    2）按照原来父子组件之间的关系，进行一层层传递
    3）context上下文(官方提供的数据传输的方式)     推荐使用这种方式**

步骤：

声明context组件
let context = React.createContext();
2. 在你需要发送数据的组件上写上 context.Provider发送数据
<context.Provider value={要发送的数据}>
<组件标签 ></组件标签>
</context.Provider>
3. 在需要接受数据的组件上写上 context.Consumer 消费者组件,来接受数据
<context.Consumer>
{value=>{value}怎么渲染数据}
</context.Consumer>

案例：

<script type='text/babel'>
    
    class A extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                data:''
            }
        }
        render(){
            return (
                <div>
                    a组件 -- {this.state.data}
                    {/* 接收B组件传递过来的值 */}
                    <B num={this.getData}></B>
                    {/* 将A组件中的数据传递给C组件 */}
                    <C msg={this.state.data}></C>
                </div>
            )
        }
        getData=(data)=>{
            this.setState({
                data
            })
        }
    }
    class B extends React.Component{
        constructor(props){
            super(props)
            this.state = {
                num:'张三丰'
            }
        }
        render(){
            return (
                <div>
                    B组件
                    <button onClick={()=>{this.sendData(this.state.num)}}>发送数据给A组件</button> 
                </div>
            )
        }
        sendData=(data)=>{
            this.props.num(data);
        }
    }
    class C extends React.Component{
        render(){
            return (
                <div>
                    C组件 -- {this.props.msg}
                </div>
            )
        }
    }
    ReactDOM.render(<A></A>,document.getElementById('app'));
</script>

函数式组件传值：

父子组件传值

父传子:

        1）在父组件中找对子标签，在子组件的标签上添加自定义属性，自定义属性名 = {要发送的数据}
            <Child 自定义属性名={要发送的数据}></Child>
        2）在子组件模板中使用props.自定义属性名可以获取父组件传递过来的数据，同时在子组件的函数中接受一个参数 props
            function 子组件名(props){
                return(
                    <div>{props.自定义属性名}</di>
                )
            }

子传父：

		前提必须要有props，在函数组件的行參的位置，需要的是子组件的函数的props
        1）在子组件中自定义一个数显进行数据发送，在需要出发的dom元素上面绑定自定义事件
        子组件模板
            <p onClick={自定义事件}></p>
            function 自定义事件(){
                props.**自定义属性名a**(要发送的数据)
            }

        2）在父组件中找到子组件标签，在子组件标签上面写 自定义属性={新的自定义方法}
            <子组件标签 **自定义属性名a**={新的方法}></子组件标签>
		（这个两个  **自定义属性名** 要一致）
        3）父组件中接收自定义参数，这个自定义参数就是子组件传递给父组件的数据
            function 新的方法(参数){
                console.log(参数) // 参数就是子组件传递给父组件的数据
            }

函数式父子组件传值案例

父组件 A.js

import React, { useState } from 'react'
import Aa from './Aa'

export default function A() {
    
    const [msg,setMsg] = useState('这是父组件需要传递的信息');
    const [arr,setArr] = useState([1,2,3,4,5,6])
  return (
    <div>
        A
        <Aa name={msg} arr={arr} msg={get}></Aa>
    </div>
  )
  function get(a,b){
      console.log(a,b);
  }
}

子组件 Aa.js

import React, { useState } from 'react'

export default function Aa(props) {

    const [msg,setMsg]=useState('Aa子组件的值')
  return (
      <React.Fragment>
        <div>{props.name}</div>
        <div>
            {
                props.arr.map((item,i)=>
                    <li key={i}>父组件传递过来的arr里面遍历过来的第{i+1}值:{item}。</li>
                )
            }
        </div>
        <br/>
        <button onClick={()=>send(1)}>传值给父组件</button>
      </React.Fragment>
  )
  function send(i){
      console.log(i);
      props.msg(msg,i)
  }
}

非父子组件传值

函数组件中我们一般情况下使用useEffect实现数据的请求
// useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount (加载，更新，卸载)这三个函数的组合。
语法格式：
useEffect(()=>{
},[])

父传子 class
父组件中子组件标签中，传递属性 msg=‘11111’
子组件件接收 this.props.msg