• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

组件间的通信

开发技术 开发技术 5小时前 3次浏览

组件之间的通信

每个组件之间都是独立的,但是它们之间也存在关系,存在关系就需要通信;

组件之间的通信也会看组件之间是什么关系,这里先介绍只基于React父子组件之间的简单通信:

在React中父子组件通信是基于一个属性props,子组件会从父组件那里接收属性,函数等;

01-props传递属性

父组件

class Father extends Component {
    constructor(props) {
        super(props)

        this.state = {
            name: "张三",
            age: 19,
            height: 1.88,
        }
    }


    render() {
        return (
            <div>
                <Child name={this.state.name} age={this.state.age} height={this.state.height} />
            </div>
        )
    }
}

子组件

function Child(props) {
    const { name, age, height } = props;

    return (
        <div>
            <div>名字:{name} 年龄:{age} 身高:{height}</div>
        </div>
    )
}

我们只需要在使用组件的时候往‘里面’塞值就行了,但是有个注意点,有些属性是不归props管的,例如:ref,key等,这些属性是不会随着props向下传递的;

02-props传递函数

上面我们讲解了props传递属性,props传递函数是让父子组件相互之间响应的关键;

简单讲下业务逻辑:父组件有一个属性counter,这个属性会子组件里面的button点击而增加

父组件

 class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            counter: 0
        }
    }

    increment() {
        this.setState({
            counter: ++this.state.counter
        })
    }

    render() {
        return (
            <div>
                <p>{this.state.counter}</p>
                {/* 记住需要绑定this,其他的都和基本数据类型相同*/}
                <Child increment={e => this.increment()}></Child>
            </div>
        )
    }
}

子组件:

function Child(props) {
    const {increment} = props;

    return (
        <button onClick={increment}>+</button>
    );
}

注意一下this的绑定就行了

03-props传递时的类型检测

在react脚手架里面集成了prop-types这个模块;

直接引用就完事了

import PropType from "prop-types"
// 此时的Child组件是函数式组件
// 为Child的props进行类型检测
Child.propTypes = {
    // isRequired是将这个属性置为必须传入的
    name: PropType.string.isRequired,
    age: PropType.number,
    height: PropType.number,
    names: PropType.array,
};

// 为Child组件添加默认值,并且即使设置了isRequired也不会报警告
Child.defaultProps = {
    name: "lsq",
    age: 18,
    height: 1.84,
    names: ["小闯", "小猛", "小攀"],
};

类组件直接在类组件内部添加static

export default class App extends Component {
		...
		static propTypes = {...}
   	static defaultProps = {...}
		...
}

至于其他的组件通信,我们后面再讲
完整代码,请到git仓库找


程序员灯塔
转载请注明原文链接:组件间的通信
喜欢 (0)