React入门基础-组件之间的传值

React组件之间的传值

Props

父传递给子组件数据，单向流动，不能子传递给父。
props的传值，可以是任意的类型。

Props可以设置默认值
HelloMessage.defaultProps = { name:”老陈”，msg：“helloworld” }

注意：props可以传递函数，props可以传递父元素的函数，就可以去修改父元素的state,从而达到传递数据给父元素。【React State相当于VUE的DATA,但是使用方式跟VUE不一致。】

父传子数据传递案例

//在父元素中使用state去控制子元素props的从而达到父元素数据传递给子元素

class ParentCom extends React.Component{
constructor(props){
super(props)
this.state = {
isActive:true
}
this.changeShow = this.changeShow.bind(this)
}

render(){
return (
<div>
<button onClick={this.changeShow}>控制子元素显示</button>
<ChildCom isActive={this.state.isActive} />
</div>
)
}

changeShow(){
this.setState({
isActive:!this.state.isActive
})
}
}

class ChildCom extends React.Component{
constructor(props){
super(props)
}
render(){
let strClass = null;
strClass = this.props.isActive?" active":"";

return (
<div className={"content"+strClass}>
<h1>我是子元素</h1>
</div>
)
}
}

ReactDOM.render(
<ParentCom />,
document.querySelector("#root")
)

React数据传递：子传父

调用父元素的函数从而操作父元素的数据，从而实现数据从子元素传递至父元素

import React from 'react';
import ReactDOM from 'react-dom';

//子传父
class ParentCom extends React.Component{
constructor(props){
super(props)
this.state = {
childData:null
}
}

render(){
return (
<div>
<h1>子元素传递给父元素的数据：{this.state.childData}</h1>
<ChildCom setChildData={this.setChildData} />
</div>
)
}
setChildData=(data)=>{
this.setState({
childData:data
})
}
}

class ChildCom extends React.Component{
constructor(props){
super(props)
this.state = {
msg:"helloworld"
}
}
render(){
return (
<div>
<button onClick={this.sendData}>传递helloworld给父元素</button>
<button onClick={()=>{this.props.setChildData('直接调用props的函数')}}>传递helloworld给父元素</button>

</div>
)
}
sendData=()=>{
//console.log(this.state.msg)
//将子元素传递给到父元素，实际就是调用父元素传递进来的父元素函数
this.props.setChildData(this.state.msg)
}
}

ReactDOM.render(
<ParentCom />,
document.querySelector('#root')
)