React学习-组件通信

React学习-组件通信

组件的嵌套

React组件复用（嵌套）和vue类似直接引用其标签即可

<div>
	<h1>我是父组件</h1>
	<Child/>
</div>

父组件给子组件传递数据

• react中和vue类似直接往标签中传递属性，即可传递相应的参数

<script type='text/babel'>
    class Parent extends React.Component{
        constructor(){
            super()
            this.state = {
                value:"我是父组件state中传递的值"
            }
        }
        render(){
            return (
                <div>
                    <h1>我是父组件</h1>
                    <Child tit="我是title" value={this.state.value}/>
                </div>
            )
        }
    }
    class Child extends React.Component{
        render(){
            let {tit,value} = this.props
            return(
                <div>
                    <h1>我是子组件</h1>
                    <p>{tit}</p>
                    <p>{value}</p>
                </div>
            )
        }
    }
    ReactDOM.render(<Parent/>,document.getElementById('app'))
</script>

• 还可以利用{children}属性传递html标签

<script type='text/babel'>
    class Parent extends React.Component{
        constructor(){
            super()
            this.state = {
                value:"我是父组件state中传递的值"
            }
        }
        render(){
            return (
                <div>
                    <h1>我是父组件</h1>
                    <Child tit="我是title" value={this.state.value}>
                        <p>我是标签中的值</p>
                    </Child>
                </div>
            )
        }
    }
    class Child extends React.Component{
        render(){
            let {tit,value,children} = this.props
            return(
                <div>
                    <h1>我是子组件</h1>
                    <p>{tit}</p>
                    <p>{value}</p>
                    {children}
                </div>
            )
        }
    }
    ReactDOM.render(<Parent/>,document.getElementById('app'))
</script>

实现的效果

子组件给父组件传递参数

父组件中

• 和vue类似，首先要给子组件标签带上一个传参标识

<Child fun={this.fn}/>

• 并实现fn函数，这里value

fn(value){
	alert(value)
}

子组件中

• 首先对父组件传过来的函数/方法，进行接收，并用点击事件去触发，并实现这个函数/方法

let {fun} = this.props
<button onClick={this.fnClick.bind(this)}>点我</button>
fnClick(){
	this.props.fun(this.state.msg)
}

最终代码

<script type='text/babel'>
    class Parent extends React.Component{
        constructor(){
            super()
        }
        fn(value){
            alert(value)
        }
        render(){
            return (
                <div>
                    <h1>我是父组件</h1>
                    <Child fun={this.fn}/>
                </div>
            )
        }
    }
    class Child extends React.Component{
        constructor(){
            super()
            this.state = {
                msg:'我是子组件里面的数据'
            }
        }
        fnClick(){
            this.props.fun(this.state.msg)
        }
        render(){
            let {fun} = this.props
            return(
                <div>
                    <h1>我是子组件</h1>
                    <button onClick={this.fnClick.bind(this)}>点我</button>
                </div>
            )
        }
    }
    ReactDOM.render(<Parent/>,document.getElementById('app'))
</script>

实现的效果：点击触发到父组件中，去弹窗显示子组件传过来的值