子组件Children传值(msg)给父组件Parent
父组件
import React ,{useState}from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import styles from './Welcome.less';
import Child from './Child';
export default (): React.ReactNode => {
const [msg,setMsg] = useState('父组件传值给子组件')
const [childMsg,setChildMsg] = useState('')
const getChildrenMsg = (msg:any) => {
setChildMsg(msg)
}
return (
<PageHeaderWrapper content=" 这个页面只有 admin 权限才能查看">
<div className={styles.content}>
<h2>{msg}</h2>
<hr/>
<Child getChildrenMsg = {getChildrenMsg.bind(this)}/>
<h2>子组件的值:{childMsg}</h2>
</div>
</PageHeaderWrapper>
)
}
子组件
import React, {useState} from 'react'
import { Button} from 'antd';
export default function Child(props:any){
const [msg,setMsg] = useState('子组件给父组件传值')
console.log('props',props)
const toParent = ()=>{
props.getChildrenMsg(msg)
}
return (
<div>
<h2>{ msg }</h2>
<Button onClick={toParent}>传值</Button>
</div>
)
}
同级组件之间传值
同一父组件下平级组件间传值 ,简单一句话 子组件先传给父组件,父组件再传给那个子组件
// 处理平级组件间传值 ,先传给父组件,父组件再传给另一个组件
class Child1 extends React.Component {
constructor (props) {
super(props);
}
handleClick() {
this.props.changeChild2Color('yellow')
}
render() {
return (
<div>
<h1>Child1: {this.props.bgColor}</h1>
<button onClick={(e) => this.handleClick(e)}>向Child2传值,改变其颜色</button>
</div>
);
}
}
class Child2 extends React.Component {
constructor (props) {
super(props);
}
render() {
return (
<div style={{background:this.props.bgColor}}>
<h1>Child2: {this.props.bgColor}</h1>
</div>
);
}
}
class Father extends React.Component {
constructor (props) {
super(props);
this.state={
child2BgColor: '#999'
};
}
onChild2BgColorChange(color) {
this.setState({
child2BgColor: color
})
}
render() {
return (
<div>
{/* 平级组件间传值*/}
<Child1 changeChild2Color={(color)=>{this.onChild2BgColorChange(color)}}></Child1>
<Child2 bgColor={this.state.child2BgColor}></Child2>
</div>
);
}
}
ReactDOM.render(
<div>
<Father></Father>
</div>,
document.getElementById('app')
);