将孫子元件中的值傳給父元件 - 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… 😦