React入门6-组件通信

最新推荐文章于 2024-07-01 21:21:20 发布

空谷足音 -จุ

最新推荐文章于 2024-07-01 21:21:20 发布

阅读量169

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/davidPan1234/article/details/88793668

版权

react 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.组件之进行通信的几种情况

父组件向子组件通信
子组件向父组件通信
跨级组件通信
没有嵌套关系组件之间的通信

2. 父组件向子组件通信

a. props

b. ref

如下示例：父组件中对子组件添加标识：ref={this.headRef}，就可以调用子自己的方法

import React, { Component } from 'react';

import Head from './components/Head'
class App extends Component {
    constructor() {
        super()
        this.headRef = React.createRef()
    }

    changeHeadTitle = () => {
        this.headRef.changeTitle('详情')
    }

    render() {
        return (
            <div className="App">
                <button onClick={this.changeHeadTitle}>改变子组件title</button>
                <Head subTitle={'sub'} ref={this.headRef}/>
            </div>
        );
    }
}

export default App;

子组件

import React, { Component } from 'react'

class Head extends Component {
    constructor(...agrs) {
        super(...agrs)
        this.state = {
            subTitle: this.props.subTitle
        }
    }

    changeTitle (title) {
        this.setState({
            subTitle: title
        })
    }

    render () {
        return (
            <div>
                header
                <div>{this.state.subTitle}</div>
            </div>
        )
    }
}

export default Head

3. 子组件向父组件通信

a. 利用回调函数

import React, { Component } from 'react';

import Head from './components/Head'
class App extends Component {
    constructor() {
        super()
        this.state = {
            title: 'App',
            isShowTitle: true
        }
    }

    hiddenTitle = () => {
        this.setState({
            isShowTitle: !this.state.isShowTitle
        })
    }

    render() {
        return (
            <div className="App">
                <div className="AppName">{this.state.isShowTitle ?  this.state.title : ''}</div>
                <Head subTitle={'sub'} ref="head" hiddenTitle={this.hiddenTitle}/>
            </div>
        );
    }
}

export default App;

将父组件函数传给子组件。通过this.props.hiddenTitle调用父组件函数

import React, { Component } from 'react'

class Head extends Component {
    constructor(...agrs) {
        super(...agrs)
    }

    render () {
        return (
            <div>
                header
                <button onClick={this.props.hiddenTitle}>切换父组件显示</button>
            </div>
        )
    }
}

export default Head

b. 将父组件this当参数传递给子组件

render() {
        return (
            <div className="App">
                <div className="AppName">{this.state.isShowTitle ?  this.state.title : ''}</div>
                <Head subTitle={'sub2'} parent={this}/>
            </div>
        );
    }

子组件可以使用父组件的this

render () {
        return (
            <div>
                header
                <button onClick={this.props.parent.hiddenTitle}>切换父组件显示2</button>
            </div>
        )
    }

4. redux

针对跨级组件和没有嵌套关系组件等，可以使用

层层组件传递props
使用自定义事件机制

但是，这里建议使用redux状态管理，请见下回分解：redux

空谷足音 -จุ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React入门6-组件通信

1.组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信2. 父组件向子组件通信a. propsb. ref如下示例：父组件中对子组件添加标识：ref={this.headRef}，就可以调用子自己的方法import React, { Component } from 'react';import Head f...
复制链接

扫一扫