第四章：组件之间的通讯

来源：互联网发布：共享网络打印机运行编辑：程序博客网时间：2024/05/28 23:11

一、`react`组件之间的通讯主要有

1、父组件到子组件
2、子组件到父组件
3、相邻组件
4、不相关的两个组件

二、父组件到子组件(常见)

父组件传递参数到子组件在开发中比较常见,react提供了一个props来进行传递

1、定义子组件

**ListItem.tsx**import * as React from 'react';//定义一个接口规范外面传递进来的参数类型export interface Props {    val:string}//定义一个接口规范state的类型export interface myState {}export default class ListItem extends React.Component<Props,myState> {    render() {        const {val} = this.props;        return (            <li>                <span>{val}</span>            </li>        );    }    constructor(props: Props) {        super(props);    }}

2、定义父组件

**List.tsx**import * as React from 'react';import ListItem from "./ListItem";//定义一个接口规范外面传递进来的参数类型export interface Props {    listName:string[]}//定义一个接口规范state的类型export interface myState {}export default class List extends React.Component<Props,myState> {    render() {        const {listName} = this.props;        return (            <ul>                {                    listName.map((val,index)=>{                        return <ListItem key={`list-${index}`} val={val}/>                    })                }            </ul>        );    }    constructor(props: Props) {        super(props);    }}

3、入口文件

**index.tsx**import * as React from 'react';import * as ReactDOM from 'react-dom';import registerServiceWorker from './registerServiceWorker';import './index.css';import List from "./List";const listName:string[] = ['张三','李四','王五'];ReactDOM.render(    <List listName={listName}/>,    document.getElementById('root') as HTMLElement);registerServiceWorker();

三、子组件传递参数到父组件

子组件传递参数到父组件,借用父组件传递参数到子组件的原理,只是在父组件定义一个方法传递到子组件

1、定义子组件

**ListItem1.tsx**import * as React from 'react';//定义一个接口规范外面传递进来的参数类型  export interface Props {    checked:boolean,    onChange:any,    value:string}//定义一个接口规范state的类型export interface myState {}export default class ListItem1 extends React.Component<Props,myState> {    render() {        const {checked,onChange,value} = this.props;        return (            <li>                <label>                    <input type="checkbox" checked={checked} onChange={onChange}/>{value}                </label>            </li>        );    }    constructor(props: Props) {        super(props);    }}

3、定义父组件

**List1.tsx**import * as React from 'react';import ListItem1 from "./ListItem1";//定义一个接口规范外面传递进来的参数类型  export interface Props {    list: any[]}//定义一个接口规范state的类型export interface myState {    stateList: any[]}export default class List1 extends React.Component<Props,myState> {    render() {        const {stateList} = this.state        return (            <ul>                {                    stateList.map((val, index) => {                        return <ListItem1 checked={val.checked} onChange={this.onItemChange.bind(this, val)}                                          value={val.value} key={`list-${index}`}/>                    })                }            </ul>        );    }    onItemChange(val:any){        console.log(val);        let result = this.state.stateList.map((v, i)=>{            if (v.value == val.value){                v.checked = !val.checked            }            return this.state;        })        this.setState({            stateList:result[0].stateList        });    }    constructor(props: Props) {        super(props);        this.state = {            stateList:this.props.list        }    }}

3、主文件入口

import * as React from 'react';import * as ReactDOM from 'react-dom';import registerServiceWorker from './registerServiceWorker';import './index.css';import List1 from "./List1";const list:object[] = [    {        'checked':true,        'value':'选项一'    },    {        'checked':false,        'value':'选项二'    }]ReactDOM.render(    <List1 list={list}/>,    document.getElementById('root') as HTMLElement);registerServiceWorker();

四、两个相邻的组件之间传递数据

这种关系通常做法是依赖他们共同的父容器

1、定义组件A

import * as React from 'react';import * as ReactDOM from 'react-dom';//定义一个接口规范外面传递进来的参数类型  export interface Props {    setValue:any}//定义一个接口规范state的类型export interface myState {}export default class ListItem21 extends React.Component<Props,myState> {    value:any;    render() {        return (            <div>                <p>我是组件A</p>                <input type="text" onChange={this.handleChange.bind(this)} ref="input-dom"/>                <input type="button" onClick={this.handleClick.bind(this)} value="通知"/>            </div>        );    }    handleChange(e:any){        this.value = e.target.value;    }    handleClick(){        const {setValue} = this.props;        setValue(this.value);        let myref = ReactDOM.findDOMNode<HTMLInputElement>(this.refs['input-dom']);        myref.value = '';    }    constructor(props: Props) {        super(props);    }}

2、定义组件B

import * as React from 'react';//定义一个接口规范外面传递进来的参数类型export interface Props {    value:any}//定义一个接口规范state的类型export interface myState {}export default class ListItem22 extends React.Component<Props,myState> {    render() {        const {value} = this.props        return (            <div>                <p>我是组件B</p>                <p>{value}</p>            </div>        );    }    constructor(props: Props) {        super(props);    }}

3、定义他们的父组件

import * as React from 'react';import ListItem21 from "./ListItem21";import ListItem22 from "./ListItem22";//定义一个接口规范外面传递进来的参数类型  export interface Props {}//定义一个接口规范state的类型export interface myState {    value:any}export default class List2 extends React.Component<Props,myState> {    render() {        return (            <div>                <ListItem21 setValue={this.setValue.bind(this)}/>                <hr/>                <ListItem22 value={this.state.value}/>            </div>        );    }    setValue(val:any){        console.log('接收子组件传递过来的参数:',val);        this.setState({            'value':val        })    }    constructor(props: Props) {        super(props);        this.state = {            'value':''        }    }}