react组件引用传值

组件引用

• ref:需要引用的组件
• refs:父级中引用的所有ref组件
• 子组件中的ref不能重复，如果重复了在refs中会进行覆盖。

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中对相应的子组件进行setState，不推荐使用
• 在子组件中添加对应的传值的方法，在父组件中调用

class Parent extends React.Component{
    constructor(...args){
        super(...args)
    }
    componentDidMount() {
        console.log(this.refs);
    }
    fn(){
        //不建议在父组件中直接进行子组件的状态设置，可以在子组件中暴露一个方法，在父组件中调用传参等
        // 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'))

子组件传值父组件

• 在父组件中使用使用子组件的时候将父组件中的this通过props传给子组件
• 在子组件中获取传递的props中的父组件的this对象，再调用相应的父组件中的方法传值就可以了

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'))

非父子组件传值

• 同页面内：公共对象、共同父级中转
• 跨页面：localhost、服务器中转
• redux 能够在程序中共享数据