組件引用

• ref:需要引用的組件
• refs:父級(jí)中引用的所有ref組件
• 子組件中的ref不能重復(fù)，如果重復(fù)了在refs中會(huì)進(jìn)行覆蓋。

class Parent extends React.Component{
    constructor(...args){
        super(...args)
    }
    componentDidMount() {
        console.log(this.refs);
    }
    render(){
        return (
            <div>
                <h2>父組件</h2>
                <Child ref="Child1"></Child>
                <Child ref="Child2"></Child>
            </div>
        )
    }
}
class Child extends React.Component{
    constructor(...args){
        super(...args)
        this.state={
            a:1
        }
    }
    render(){
        return (
            <div>
                <h2>子組件</h2>
                <p>{this.state.a}</p>    
            </div>
        )
    }
}
ReactDOM.render(<Parent></Parent>,document.getElementById('root'))

父組件傳值子組件

• 在父組件中的refs中對(duì)相應(yīng)的子組件進(jìn)行setState，不推薦使用
• 在子組件中添加對(duì)應(yīng)的傳值的方法，在父組件中調(diào)用

class Parent extends React.Component{
    constructor(...args){
        super(...args)
    }
    componentDidMount() {
        console.log(this.refs);
    }
    fn(){
        //不建議在父組件中直接進(jìn)行子組件的狀態(tài)設(shè)置，可以在子組件中暴露一個(gè)方法，在父組件中調(diào)用傳參等
        // this.refs.Child1.setState({
        //     a: this.refs.Child1.state.a + parseInt(this.refs.text.value)
        // })
        const {text,Child1} = this.refs
        Child1.add(text.value)
    }
    render(){
        return (
            <div>
                <h2>父組件</h2>
                <input type="text" ref="text"></input>
                <input type="button" value="加1" onClick={this.fn.bind(this)}></input>
                <Child ref="Child1"></Child>
            </div>
        )
    }
}
class Child extends React.Component{
    constructor(...args){
        super(...args)
        this.state={
            a:1
        }
    }
    add(n){
        this.setState({
            a:this.state.a + parseInt(n)
        })
    }
    render(){
        return (
            <div>
                <h2>子組件</h2>
                <p>{this.state.a}</p>    
            </div>
        )
    }
}
ReactDOM.render(<Parent></Parent>,document.getElementById('root'))

子組件傳值父組件

• 在父組件中使用使用子組件的時(shí)候?qū)⒏附M件中的this通過props傳給子組件
• 在子組件中獲取傳遞的props中的父組件的this對(duì)象，再調(diào)用相應(yīng)的父組件中的方法傳值就可以了

class Parent extends React.Component{
    constructor(...args){
        super(...args)
        this.state={
            a:1
        }
    }
    add(n){
        this.setState({
            a:this.state.a + parseInt(n)
        })
    }
    render(){
        return (
            <div>
                <h2>父組件</h2>
                <p>{this.state.a}</p>  
                <Child  parent={this}></Child>
            </div>
        )
    }
}
class Child extends React.Component{
    constructor(...args){
        super(...args)
    }
    fn(){

        this.props.parent.add(parseInt(this.refs.text.value))
    }
    render(){
        return (
            <div>
                <h2>子組件</h2>
                <input type="text" ref="text"></input>
                <input type="button" value="加1" onClick={this.fn.bind(this)}></input>
            </div>
        )
    }
}
ReactDOM.render(<Parent></Parent>,document.getElementById('root'))

非父子組件傳值

• 同頁面內(nèi)：公共對(duì)象、共同父級(jí)中轉(zhuǎn)
• 跨頁面：localhost、服務(wù)器中轉(zhuǎn)
• redux 能夠在程序中共享數(shù)據(jù)