将孙子组件中的值传给父组件 - React

需求分析

需求: 点击孙子组件, 将点击的父组件的index显示出来, 这时就要将​​父组件的index​​​传给​​子组件​​​,然后在传给​​孙子组件​​​,这时通过​​点击对应的孙子组件​​​,再将​​点击的孙子组件​​​再通过​​子组件​​​传给​​父组件​​

Father.js

// 父亲组件
export default class Father extends Component{
    constructor(props) {
        super(props);
        // 接收子组件传来的值的固定套路
        this.handleLawClick=this.handleLawClick.bind(this)
        this.state={
            law_click_count: 0
        }
    }
    render() {
        return(
            <div>
                {
                    this.state.basic_list.map((item,index)=>{
                        return(
                            <Son
                                data={item}
                                // 传给儿子组件的index值
                                index={index}
                                // 重点: 接收孙子传给儿子组件的值, 由于是props, 所以只能通过函数来接收, 这也是固定套路
                                handleLawClick={this.handleLawClick}
                            />
                        )
                    })
                }
            </div>
        )
    }
    // 固定套路
    handleLawClick(val) {
        this.setState({law_click_count: val});
    }
}

Son.js

// 儿子组件
export default class Son extends Component {
    constructor(props) {
        super(props);
        this.state={
            items=this.props.data,
            // 初始化值来接收父组件的index
            law_index:0
        }
        
    }
    render() {
        // 接收父组件传来的index的值
        this.state.law_index=this.props.index
        return(
            <div>
                {items.map((item, index)=>{
                    return(
                        <Grandson
                            data={item}
                            index={index}
                            // 将接收的父组件的值传给孙子组件
                            law_index={this.state.law_index}
                            // 重点: 通过定义handleLawClick_item属性,来接收孙子组件传来的值, 并将传过来的值赋给了父组件的handleLawClick
                            handleLawClick_item={this.props.handleLawClick}
                    )
                  })
                }
            </div>
        )
    }
}

Grandson.js

// 孙子组件
export default class Grandson extends Component {
    constructor(props) {
        super(props);
        this.data=this.props.data
        // 接收儿子组件传来的值
        this.law_index_item=this.props.law_index
    }
    
    render() {
        return (
            <div>
                <span onClick={()=>this.click(this.props.index)}>{this.data[0]}</span>
            <div>
        )
    }
    
    click=(i)=>{
        // 注意: 参数i是 儿子组件的index, 这个和父组件的index有很大的区别的!
        // 重点: 孙子组件的值传给儿子组件
        this.props.handleLawClick_item(this.law_index_item)
    }
}

看上面动图, 你可以看到通过点击法条, 最后显示的数字变化.

可以很直观的看到:

• ​​law_click_index​​的值是遍历子组件传过来的(index+1)
• ​​law_click_count​​的值则是通过父组件的index传给子组件在传给孙子组件,在传回来.

昨天刚写完这篇文章, 今天在按照上面写传个值竟然一直报错​​TypeError:this.props.xxx is not a function​​, 百思不得其解, 看了这条答案, 我返回去看了一下代码, 竟然 真的没有bind绑定, 我真是服了… … 心不在焉的时候最好就别敲代码了, 可能你敲得都是bug… 😦