ReactP7_React的组件化开发（二）_super(props)传值问题_组件通信子传父_Context

最新推荐文章于 2024-03-29 22:01:06 发布

dauntless1310

最新推荐文章于 2024-03-29 22:01:06 发布

阅读量259

点赞数

分类专栏： react学习文章标签： reactjs

本文链接：https://blog.csdn.net/dauntless1310/article/details/108513931

版权

react学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ReactP7_React的组件化开发（二）

关于super(props)的传值问题
组件通信子传父
组件通信案例
Context

这边是react学习记录，期间加入了大量自己的理解，用于加强印象，若有错误之处还请多多指出

关于super(props)的传值问题

props打印情况不同

正常情况下，需要super(props)方法来获取传入此组件的参数。如图所示，super( )方法并没有去主动获取props中的参数，所以在随后的console.log(this.props)中打印出来的是undefined，但是在render函数中，却可以获得props值，获取值和super( )没有关系。这个原因，需要从源码中去解读。框架不论我们是否主动获取并赋值this.props值，都会在运行的过程中进行一次对this.props的赋值操作，因此在随后是可以直接使用传过来的props参数的。具体代码的位置在如图所示的代码中
赋值代码

组件通信子传父

某些情况，我们也需要子组件向父组件传递消息：

在vue中是通过自定义事件来完成的——this.$emit([自定义事件名])

在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可

个人理解来看，就是告诉子组件一些信息“A={func}”，其中A是发生的事件名称，func是发生该事件之后需要执行的事情，或者说需要执行的函数，子组件如果需要了，就会在发生指定的情况之后执行以下A，那么就会在父组件根据A触发的情况，执行以下func。和vue不同的是，vue是子组件告诉父组件发生了事情A，然后在A执行func，React是父组件告诉子组件A和func，然后子组件发生并使用了A，对应的调用了父组件之前给的的func

Appjs代码

import React,{ Component } from "react";
import Child from "./Child"

export default class App extends Component{
    constructor(props){
        super();
        this.state = {
            counter:0
        }
        
    }
    
    render(){
        const {counter} = this.state;
        return (
            <div>
                <h2>{counter}</h2>
                <Child add = { e=>{this.Increment()}}/>
            </div>
        )
    }

    Increment(){
        this.setState({
            counter:this.state.counter + 1,
        })
    }
}

Childjs代码

import React , {Component} from "react";

export default class Child extends Component{
    constructor(props){
        super(props);
        this.state = {

        }
    }

    render(){
        const { add } = this.props;
        return(
            <button onClick={add}>+1</button>
        )
    }
}

通俗的讲：此处就是父组件写了方法Increment，并且告诉子组件，发生add事件的话我就会执行Increment，子组件在发生点击事件之后，告诉父组件，发生了add事件需要执行Increment，此时父组件执行了一次Increment函数。基本就是这么个思路

组件通信案例

tab效果

制作一个类似于tab的点击显示效果：直接上代码

App.js

import React,{ Component } from "react";
import TabControl from "./TabControl"


export default class App extends Component{
    constructor(props){
        super();
        console.log(this.props);//undefined
        this.state = {
            titles:["A","B","C"],
            currentIndex:0,
        }
        
    }
    
    render(){
        console.log(this.props);//{}
        const { titles, currentIndex } = this.state;
        return (
            <div>
                <TabControl itemClick={ index => { this.itemClick(index) }} titles={titles}/>
                <h2>{titles[currentIndex]}</h2>
            </div>
        )
    }

    itemClick(index){
        this.setState({
            currentIndex:index
        })
    }
}

tabControl.js

import React from "react";
import PropTypes from "prop-types"

export default class TabControl extends React.Component{
    constructor(props){
        super(props);
        this.props = props;
        this.state = {
            currentIndex : 0,
        }
    }

    render(){
        const { titles } = this.props;
        const { currentIndex } = this.state;
        return (
            <div className="tab-control">
                {
                    titles.map((item,index)=>{
                        return(
                            <div key={item} 
                                 className={"tab-item " + (index === currentIndex?"active":"")} 
                                 onClick={ e => { this.itemClick(index) }}>
                                <span>{item}</span>
                            </div>
                        )
                    })
                }
            </div>
        )
    }

    itemClick(index){
        this.setState({
            currentIndex:index,
        })

        const { itemClick } = this.props;
        itemClick(index);
    }
}

TabControl.propTypes = {
    titles:PropTypes.array,
    currentIndex:PropTypes.number,
}

style.css

*{
    margin: 0;
    padding: 0;
}
.tab-control{
    display: flex;
    text-align: center;
    height: 44px;
    line-height: 44px;
}
.tab-item{
    flex: 1;
}
.tab-item span{
    padding: 8px 5px;
}
.tab-item.active span{
    border-bottom: solid 2px red;
}