React组件通讯

组件通讯

组件是一个独立的单元,默认情况下组件只能自己使用自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,便于更好的完成整个应用的功能。

Props

  • 组件本来是封闭的,要接受外部数据应该可以通过Props来实现
  • props的作用:接受传递给组件的数据
  • 传递数据:给组件标签添加属性
  • 接收数据:函数组件通过参数Props接收数据,类组件通过this.props接收数据

函数组件通讯

函数组件

若子组件是函数组件,父组件和子组件之间进行通信的时候,父函数使用属性传递参数,子函数使用函数方法接收props 即可。

类组件接收

类组件接收,通过this.props进行访问

javascript 复制代码
import React, {Component} from "react";
import ReactDom from 'react-dom'
import Demo from './Demo'
class App extends Component{
   render(){
       return(
       <div>
           <h1>我是APP组件</h1>
           <Demo car="litter yellow car" money={100}></Demo>
       </div>
   )}
}

ReactDom.render(<App />,document.getElementById('root'))
javascript 复制代码
import {Component} from "react";

export default class Demo extends Component{
    render() {
        const {car,money} = this.props
        return (
            <div>
                <h1>我是Demo组件</h1>
                <p>{car}</p>
                <p>{money}</p>
            </div>
        )
    }
}

props特点

  • 可以给组件传递任意类型的数据
  • props是只读的,不允许修改props的数据,单项数据流
  • 注意:在组件中使用的时候,需要把props传递给super(),否则构造函数无法获取到props
javascript 复制代码
import React, {Component} from "react";
import ReactDom from 'react-dom'
import Demo from './Demo'
class App extends Component{
    state={
        money:100
    }
   render(){
       return(
       <div>
           <h1>我是APP组件</h1>
           <button onClick={this.buy}>购买物品</button>
           <Demo
            name="zs"
            money={this.state.money}
            flag={true}
            fn={()=>{
                console.log('fn函数')
            }}
            list={[1,2,3]}
            user={{name:'zs',age:1}}
           ></Demo>
       </div>
   )}
    buy = () => {
        this.setState(prevState => ({
            money: prevState.money - 10
        }));
    }

}

ReactDom.render(<App />,document.getElementById('root'))
javascript 复制代码
// 函数组件
export default function Demo(props){
    console.log(props)
    return(
        <div>
            <h3>我是DEMO组件</h3>
            <div>金钱{props.money}</div>
        </div>
    )
}

单项数据流,只能由父亲修改子组件参数,子组件只能接收父亲传过来的值,但是子组件不能反向修改父亲的值。

Props特点

  • 可以给组件传递任意类型的数据
  • props是制度的,不允许修改props的数据,单向数据流
  • 注意:在类组件中使用的时候,需要吧props传递给super(),否则构造函数无法访问到props
javascript 复制代码
class Hello extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>接收到的数据:{
      this.props.age
    }</div>
  }
}

组件之间的三种通讯

父传子

  1. 副组件提供传递的state数据
  2. 给足子组件标签添加属性,值为state中的数据
  3. 子组件中通过props接受副组件中传递的数据

副组件提供数据并且传递给子组件

javascript 复制代码
import React, {Component} from "react";
import ReactDom from 'react-dom'
import Demo from './Demo'
class App extends Component{
    state={
        lastName:''
    }
   render(){
       return(
       <div>
           <h1>我是APP组件</h1>
            <div>
                配偶:<input type="text" placeholder="请输入配偶的名字" onChange={this.handleChange}/>
            </div>
           <Demo name={this.state.lastName}></Demo>
       </div>
   )
    }
    handleChange = (event) => {
        this.setState({
            lastName: event.target.value,
        });
    };
}

ReactDom.render(<App />,document.getElementById('root'))

子组件

javascript 复制代码
// 函数组件
export default function Demo(props){
    console.log(props)
    return(
        <div>
            <h3>我是DEMO组件</h3>
            <div>金钱{props.name}</div>
        </div>
    )
}

子传父

思路:利用回调函数,父组件提供回掉,子组件调用,将要传递的数据作为回调函数的参数。

  1. 副组件提供一个回调函数(用于接收数据)
  2. 将该函数作为属性的值,传递给子组件
  3. 子组件通过Props调用回调函数
  4. 将子组件函数作为参数传递给回调函数

父组件提供函数并且传递给字符串

javascript 复制代码
import React, {Component} from "react";
import ReactDom from 'react-dom'
import Demo from './Demo'
class App extends Component{
    state={
        lastName:'',
        childen:''
    }
   render(){
       return(
       <div>
           <h1>我是APP组件</h1>
            <div>
                配偶:<input type="text" placeholder="请输入配偶的名字" onChange={this.handleChange}/>
            </div>
           <div>
               子组件传递数据:{this.state.childen}
           </div>
           <Demo name={this.state.lastName} changeName={this.changeName}></Demo>

       </div>
   )
    }
    handleChange = (event) => {
        this.setState({
            lastName: event.target.value,
        });
    };

    changeName = (name)=>{
        console.log('fater accept',name)
        this.setState({childen:name})
    }
}

ReactDom.render(<App />,document.getElementById('root'))

子组件代码

javascript 复制代码
// 函数组件
import {Component} from "react";
export default class Demo extends Component{
    state = {
        wife:'',
    }
    render() {
        return(
            <div>
                <h3>我是DEMO组件</h3>
                <div>金钱{this.props.name}</div>
                <div>
                    配偶的名字:<input type="text" value={this.state.wifi} onChange={this.handleChange}/>
                </div>
            </div>
        )
    }
    handleChange = (e)=>{
        this.setState({wife:e.target.value})
        // 传递给父组件
        this.props.changeName(e.target.value)
    }
}
// export default function Demo(props){
//
//     console.log(props)
//     return(
//         <div>
//             <h3>我是DEMO组件</h3>
//             <div>金钱{props.name}</div>
//             <div>
//                 配偶的名字:<input type="text"/>
//             </div>
//         </div>
//     )
// }

自己做的一个小Demo

思路:父亲给孩子钱,孩子小费多少钱,然后返还给给父亲多少钱

在这个小Demo中父亲会使用input给孩子钱,孩子在接受到父亲给的钱后去超市花钱然后再找零给父亲。

javascript 复制代码
import React, {Component} from "react";
import ReactDom from 'react-dom'
import Demo from './Demo'
class App extends Component{
    state={
        money:'',
        remain:''
    }
   render(){
       return(
       <div>
           <h1>我是APP组件父亲组件</h1>
           给你:<input type="text" onChange={this.handletext}/>
           应该还给我:{this.state.remain}
           <Demo givemoney = {this.state.money} remainmoney={this.remainmoney}></Demo>
       </div>
   )
    }
    handletext = (e)=>{
        this.setState({
            money:e.target.value
        })
    };
    remainmoney = (speedmoneys)=>{
        this.setState({
            remain:this.state.money-speedmoneys
        })
    }
}

ReactDom.render(<App />,document.getElementById('root'))
javascript 复制代码
// 函数组件
import {Component} from "react";
export default class Demo extends Component{
    state = {
        money: '',
        speedmoneys:''
    }
    render() {
        return(
            <div>
                <h3>我是DEMO组件</h3>
                <p>我收到了:{this.props.givemoney}</p>
                我花了:<input type="text" onChange={this.speedmoney}/>
            </div>
        )
    }
    speedmoney = (e)=>{
        this.setState({
            speedmoneys:e.target.value
        })
        this.props.remainmoney(e.target.value)
    }
}

兄弟父子

兄弟组件通讯(没有)

  • 将共享状态提升到最近的公共组件中,由公共父组件管理这个状态
  • 思想:状态提升
  • 公共组件的职责:
    • 提供共享状态
    • 提供共享状态的方法
  • 要通讯的子组件只需通过props接收状态或操作状态的方法

状态提升前

提升状态之后

context组建通讯

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import Father from './Father';

//1.创建组件
//2.使用Provider组件包裹根元素,Provider组件就是最大的根元素

const {Provider,Consumer}  = React.createContext()

const root = ReactDOM.createRoot(document.getElementById('root'));
class App extends React.Component {
  state={
    color:'red'
  }
  render() {
    return (
      <Provider value={this.state.color}>
  <div>
  <h1>我是APP组件</h1>
  <Father color = {this.state.color}/>
  </div>
  <Consumer>
  {
    (value)=>{
      return <h1 style={{color:value}}>我是Custom组件</h1>
      }
      }
  </Consumer>
  </Provider>
);
}
}
root.render(<App />);

React使用Consumer进行数据共享,直接使用React.createContext进行创建两个包,使用Provide进行数据展示,然后使用Consumer进行数据共享。

但是数据共享过程中Consumer里面需要用到函数进行引用,使用函数引用的方法才可以进行Consumer设置

使用Childer父传子

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import Header from './head';
import Dialog from './Dialog';


const root = ReactDOM.createRoot(document.getElementById('root'));
class App extends React.Component {
  render() {
    return (
       <div>
           <h1>children属性</h1>
           <Header>首页</Header>
           <Header>登陆</Header>
           <Dialog title={<h1>温馨提示</h1>}>
               <input type="text"/>
               <button>登陆</button>
               <button>注册</button>
           </Dialog>
       </div>
    );
  }
}
root.render(<App />);

childer可以穿入任意元素,例如button,input等,这里我定义了一个Dialog的组件

javascript 复制代码
import React, {Component} from 'react';

class Dialog extends Component {
    render() {
        return (
            <div>
                <h1>Children属性</h1>
                {this.props.title}  {/* 这里是渲染title */}
                {this.props.children}  {/* 这里是渲染input */}
            </div>
        );
    }
}

export default Dialog;

可以看到我的接收参数只有两个一个是title一个是childern

我的children直接获取父亲节点传过来的所有结构

Props校验

目的:校验接受的props的数据类型,增加组件的健壮性

对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据

如果传入数据格式不对,可能会导致组件内部报错。
组件的使用者不能明确知道报错原因

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import Header from './head';
import Dialog from './Dialog';


const root = ReactDOM.createRoot(document.getElementById('root'));
class App extends React.Component {
  render() {
    return (
       <div>
           <h1>children属性</h1>
           <Header>首页</Header>
           <Header>登陆</Header>
           <Dialog title={<h1>温馨提示</h1>} list={[1,2,3,4]}>
               <input type="text"/>
               <button>登陆</button>
               <button>注册</button>
           </Dialog>
       </div>
    );
  }
}
root.render(<App />);
javascript 复制代码
import React, {Component} from 'react';
import PropTypes from "prop-types";
class Dialog extends Component {
    render() {
        return (
            <div>
                <h1>Children属性</h1>
                {this.props.title}  {/* 这里是渲染title */}
                {this.props.children}  {/* 这里是渲染input */}
                <ul>
                    {
                        this.props.list.map((item)=>(
                            <li key={item}>{item}</li>
                        ))
                    }
                </ul>
            </div>
        );
    }
}

// 增加校验规则
Dialog.propTypes = {
    title: PropTypes.string,
    list: PropTypes.array
}
export default Dialog;

约束规则:

1.常见类型:array,bool,func,number,object

2.React元素类型:element

3.必填项:isRequired

4.特定的结构对象:shape({})

javascript 复制代码
// 增加校验规则
Dialog.propTypes = {
    title: PropTypes.string.isRequired,
    list: PropTypes.array
}

默认属性

在未传入Props时生效,有默认属性

javascript 复制代码
Dialog.defaultProps={
  pageSize:10
}

在使用组件的时候用户不传入该值,给予默认值设置

相关推荐
想睡好5 分钟前
css文本属性
前端·css
qianmoQ7 分钟前
第三章:组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现
前端·css
记得早睡~13 分钟前
leetcode150-逆波兰表达式求值
javascript·算法·leetcode
zhoupenghui16820 分钟前
golang时间相关函数总结
服务器·前端·golang·time
White graces34 分钟前
正则表达式效验邮箱格式, 手机号格式, 密码长度
前端·spring boot·spring·正则表达式·java-ee·maven·intellij-idea
庸俗今天不摸鱼35 分钟前
Canvas进阶-4、边界检测(流光,鼠标拖尾)
开发语言·前端·javascript·计算机外设
bubusa~>_<1 小时前
解决npm install 出现error,比如:ERR_SSL_CIPHER_OPERATION_FAILED
前端·npm·node.js
[廾匸]1 小时前
cesium视频投影
javascript·无人机·cesium·cesium.js·视频投影
风清云淡_A2 小时前
【react18】如何使用useReducer和useContext来实现一个todoList功能
react.js
流烟默2 小时前
vue和微信小程序处理markdown格式数据
前端·vue.js·微信小程序