React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React组件传参

React组件传参方式你了解吗

作者：coolFish

众所周知 ,在业务开发中,无论用的什么框架,首先要熟悉项目搭建,路由配置和组件通信,所以我们今天要探究的就是React中组件通信的几种方式,快跟随小编一起学习起来吧

序言

众所周知 ，在业务开发中，无论用的什么框架，首要熟悉的有以下几点：

我们今天要探究的就是React中组件通信的几种方式，以及各自的应用场景。

父子组件通信

在React中，父组件可以通过 props 向子组件传递数据和回调函数，从而实现父子组件之间的通信。同时，子组件可以通过调用父组件传递的回调函数来向父组件传递数据或者触发父组件的行为，有以下几个注意要点。

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
​
function ParentComponent() {
  const [messageFromChild, setMessageFromChild] = useState('');
​
  const handleMessageFromChild = (message) => {
    setMessageFromChild(message);
  };
​
  return (
    <div>
      <h1>Parent Component</h1>
      <p>Message from Child: {messageFromChild}</p>
      <ChildComponent giveChildren={parentData} onMessage={handleMessageFromChild} />
    </div>
  );
}
​
export default ParentComponent;
// ChildComponent.js
​
//1.函数式组件
​
import React from 'react';
​
function ChildComponent(props) {
  const { onMessage , parentData } = props;
  const sendMessageToParent = () => {
    onMessage('Hello from Child!');
  };
​
  return (
    <div>
      <h2>Child Component</h2>
      <h2>{ parentData }</h2>
      <button onClick={sendMessageToParent}>Send Message to Parent</button>
    </div>
  );
}
​
export default ChildComponent;
​
//1. 类组件
​
import React, { Component } from 'react'
​
export default class ChildComponent extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

小结：我们看上面代码，通过在组件上属性名，在子组件中，就可以从props中解构出该属性，这个属性也可以是一个回调函数，当该回调函数调用时，入参就会在父组件的形参那里拿到，跟jsonp的原理一样。

父孙组件通信

聪明的同学相信可以通过父子组件通信举一反三，但是为了一个传参，写好几层回调，这种代码看起来就不适用，所以为了解决这个问题，react 给我们提供了一个方法 createContext 这是一个创建React 上下文的函数，这个上下文提供了组件中共享值的方法，不用显示的通过props层层传递。

//跨组件通信
import React, { Component } from 'react'
//创建context 给初始值
const UserMessage = React.createContext({
    nickName: 'yyy',
    level: 1
})
​
export default class TextSingal extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nickName: 'kkk',
            level: 99,
            name: 'ppp',
            age: 9999
        }
    }
    render() {
        const { name, age } = this.state
        return (
            <div>
                <h2>爷爷组件</h2>
                <h3>name:{name}</h3>
                <h3>age:{age}</h3>
                {/* 改变数据孙组件也更新 */}
                <button onClick={() => this.handelClick()}>updated</button>
                {/* 传入state对象和foo回调函数 */}
                {/* foo函数用于孙组件和爷组件通信 */}
                <UserMessage.Provider value={{ ...this.state, foo: (name, age) => this.updateDatas(name, age) }}>
                    <Father />
                </UserMessage.Provider>
​
            </div>
        )
    }
    handelClick() {
        this.setState({
            nickName: '虎威神',
            level: 9999
        })
    }
    updateDatas(name, age) {
        this.setState({
            name,
            age
        })
    }
}
​
class Father extends Component {
    render() {
        return (
            <div>
                <h2>爸爸组件</h2>
                <Son />
            </div>
        )
    }
}
class Son extends Component {
    render() {
        // 解构
        const { nickName, level, foo } = this.context
        return (
            <div>
                <h2>儿子组件</h2>
                <h3>nickname:{nickName}</h3>
                <h3>level:{level}</h3>
                {/* 下面两种调用方式都可以 */}
                {/* 改变爷组件的数据 */}
                <button onClick={() => this.handelClick()}>updated</button>
                <button onClick={() => foo('牛霸天', 18)}>updated</button>
            </div>
        )
    }
    handelClick() {
        this.context.foo('牛霸天', 18)
    }
}
// 接受爷组件传递的值
Son.contextType = UserMessage

小结：通过上述我们创建了一个context，然后用context.provider 将组件包裹，那么被包裹的组件将会共享这个context，在context上定义回调，在孙组件通过 this.context 即可调用回调，或者使用传入数据。

兄弟组件通信

相对于Vue中兄弟组件传参，react会相对原始一些，Vue中可以通过evenbus，便捷的在各种组件中传递参数。而react的做法是，在兄弟组件共同的父组件中，创建一个公用的state，然后兄弟A组件通过跟父组件传递传参改变这个state，父组件将新值也传给B组件，以达到兄弟组件传参的目的。

父组件

//父组件
import React, {Component} from "react"
import Abrother from './Abrother'
import Bbrother from './Bbrother'
​
export default class common extends Component {
    // 公共的组件部分
    state = {
        inputValue:''
    }
​
    handleUpdate = (inputValue) => {
        this.setState({
            inputValue
        })
    }
​
    render(){
        return(
            <>
              <Abrother sendFn={this.handleUpdate}/>
              <Bbrother sendValue={this.state.inputValue}/>
            </>
        )
    }
}

兄弟A

import React,{Component} from "react";
​
export default class Abrother extends Component {
​
    // 兄弟组件A需要将值先传给一个公共的父组件
    state = {
        inputValue:''
    }
​
    handleChange = (e)=>{
        console.log(e.target.value);
        this.setState({
            inputValue:e.target.value
        })
    }
    handleSend = () => {
        const {sendFn} = this.props;
        sendFn(this.state.inputValue)
    }
​
    render(){
        return(
            <>
               <div>
                   <span>A组件</span>
                   <input type='text' value={this.state.inputValue} onChange={this.handleChange}></input>
                   <button onClick={this.handleSend}>发送A组件的值</button>
               </div>
            </>
        )
    }
}

兄弟B

import React, {Component} from "react"
​
export default class Bbrother  extends Component {
​
​
    render(){
        const { sendValue} = this.props;
        return (
            <div>
                <span>b组件</span>
                <h1>{ sendValue }</h1>
            </div>
        )
    }
}

小结: 组件A,想要将输入框中的值传给组件B，那么先在父组件的 state 中定义一个变量，这个变量就是要传给组件 B 中的值，父组件中将这个值通过props的形式传入b组件。接下来定义父组件和A组件中的回调函数触发，当A组件数据移动，调用回调函数，改变父组件 state 中的值，以达到将新值传给B组件的目的。

跨组件通信

props ，当组件层级连贯且浅的时候，可以直接使用props进行通信。

context API , 当组件数据跨越了层级的时候，可以用此方法省去层层props。

事件总线，evenbus等。通过引入库或者自己手写一个简单的，进行通信。

使用 Redux MobX，对于非常复杂的组件中共享状态的数据处理时，可以用这两个库进行处理

使用 Refs，直接操作DOM 元素，或者组件实例。

到此这篇关于React组件传参方式你了解吗的文章就介绍到这了,更多相关React组件传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文