react 子传参父_react 中父传子，子传父，以及兄弟组件传参问题

父组件向子组件传值(通过props传值)

子组件：

class Children extends Component{

constructor(props){

super(props);

}

render(){

return(

这是：{this.props.name}

// 这是 父向子

)

}

}

父组件:

class App extends React.Component{

render(){

return(

)

}

}

父组件向子组件传值(回调函数)

子组件：

class Children extends Component{

constructor(props){

super(props);

}

handerClick(){

this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样

}

render(){

return(

父组件的背景色{this.props.bgcolor}

// 子组件接收父组件传过来的值 bgcolor

{this.handerClick(e)}}>改变父组件背景 // 子组件执行函数

)

}

}

父组件

class Father extends Component{

constructor(props){

super(props)

this.state = {

bgcolor:'pink'

}

}

bgChange(color){

this.setState({

bgcolor:color

})

}

render(props){

// 给子组件传递的值 color

{this.bgChange(color)}} />

// changeColor 子组件的参数=color 当做形参

}

}

兄弟组件传值(子传给父，父再传给另一个子)

子组件1

class Children1 extends Component{

constructor(props){

super(props);

}

handerClick(){

this.props.changeChild2Color('skyblue')

// 改变兄弟组件的颜色 把changeChild2Color的参数传给父

}

render(){

return(

children1

{this.handerClick(e)}}>改变children2背景

)

}

}

子组件2

class Children2 extends Component{

constructor(props){

super(props);

}

render(){

return(

// 从父元素获取自己的背景色

children2 背景色 {this.props.bgcolor}

// children2 背景色 skyblue

)

}

}

父组件

class Father extends Component{

constructor(props){

super(props)

this.state = {

child2bgcolor:'pink'

}

}

onchild2bgChange(color){

this.setState({

child2bgcolor:color

})

}

render(props){

{this.onchild2bgChange(color)}} />

}

}