React中中間組件如何傳遞props屬性

在react中自定義的組件中如果我們想綁上點擊click事件時，加上onClick={}並不會起作用。

因為我們自定義的組件，並不是一個真實的DOM元素，它不存在點擊事件，因為它不是最終渲染的頁面的元素。

這時候我們需要在最底層真實的DOM元素上綁定，如下

<div onClick={this.props.onClick}/>

　　如果我們只封裝一層這樣綁定還好，如果是多層而且多個屬性，那每一層都要寫大量代碼，這時候就可以用{...this.props}

案例 Father——>Middle——>Child

class Child extends React.Component{
    render(){
        return(
            <ul>
                <li>{this.props.name}</li>
                <li>{this.props.age}</li>
                <li>{this.props.sex}</li>
            </ul>
        )
    }
}
class Middle extends React.Component{
    render(){
        return(
            <Child name={this.props.name}
                age={this.props.age}
                sex={this.props.sex}/>
        )
    }
}
// {...this.props}擴展賦值，一一對應
class Father extends React.Component{
    render(){
        return(
            <Middle
            {...this.props}
            />
        )
    }
}

　　最后調用Father組件時

<Father name="Jack" age="18" sex="boy"/>