React之组件通信

Posted 2020-09-20

  组件通信无外乎，下面这三种父子组件，子父组件，平行组件（也叫兄弟组件）间的数据传输。下面我们来分别说一下：

父子组件：

var Demo=React.createClass({
    getInitialState:function(){
        return{
            res:‘‘
        }
    },
    tap:function(e){
        var str=e.target.value;
        this.setState({res:str})
    },
    render:function(){
        return(
            <div>
                <h1>父组件</h1>
                <input type="text" onChange={this.tap}/>
                <Child name={this.state.res}/>
            </div>
        )
    }
})
var Child=React.createClass({
    render:function(){
        console.log(this.props)
        return(
            <div>
                <h1>子组件</h1>
                <p>{this.props.name}</p>
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById(‘out‘))

这里我们通过设置默认状态，添加onchange事件，并把状态以默认属性的形式给子组件，然后通过this.props来获取。

说完了父子组件，那么子组件如何传递到父组件呢？

<script type="text/babel">
        var Demo=React.createClass({
    getInitialState:function(){
        return{
            res:‘‘
        }
    },
    render:function(){
        var _this=this;
        return(
            <div>
                <h1>父组件</h1>
                <p>{this.state.res}</p>
                <Child name={function(s){
                    _this.setState({res:s})
                }}/>
            </div>
        )
    }
})
var Child=React.createClass({
    tap:function(e){
        var str=e.target.value;
        console.log(str)
//        this.props.name==function
//        this.props.name(a)==function(s)
//        a==s
        this.props.name(str)
//        str==s
    },
    render:function(){
        console.log(this.props)
        return(
            <div>
                <h1>子组件</h1>
                <input type="text" onChange={this.tap}/>    
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById(‘out‘))
    </script>

【子组件】控制自己的 state 然后告诉【父组件】的点击状态，然后在【父组件】中展示出来。

----------------------------------------------------------------------------------------------------------------------------------------------------

同级组件间的通讯复杂点，不过这里可以说点思路，假如这两个组件拥有相同的父组件可以将父组件作为桥梁，一个组件先传递给父组件，然后父组件再传递给兄弟组件。

另外还可以使用观察着模式，还有redux。这两个我还没完全理解，日后再说。