父—子
//父组件
class Main extends React.Component{
constructor(props){
super();
this.state = {
age:50,
}
}
render(){
return (
<div>
{
/* 传递参数age给子组件 */}
<Check age={
this.state.age} />
</div>
)
}
}
//子组件
class Check extends React.Component{
render(){
return (
<div>
<p>接收age:{
this.props.age}</p>
</div>
)
}
}
子—父
//父组件
class Main extends React.Component{
constructor(props){
super();
this.state = {
age:50,
}
}
handleParent(check){
console.log(check);
this.setState({
age:check})
}
render(){
return (
<div>
<p>我是父组件 age:{
this.state.age}</p>
{
/* 传递回调函数handleParent接受子组件参数，注意：绑定this */}
<Check handleParent={
this.handleParent.bind(this)} {
...this.state} />
</div>
)
}
}
//子组件
class Check extends React.Component{
constructor(props){
super();
this.state = {
age:10
}
}
onChange(e){
this.setState({
age:e.target.value})
//调用父组件回调函数handleParent传递当前值
this.props.handleParent(e.target.value)
}
render(){
return (
<div>
<p>我是子组件 age:{
this.state.age}</p>
<input type="text" value={
this.props.age} onChange={
(event)=>this.onChange(event)} />
</div>
)
}
}
父—孙
//父组件
class Main extends React.Component{
constructor(props){
super();
this.state = {
age:50,
}
}
render(){
return (
<div>
{
/* 传递参数age给子组件 */}
<Check age={
this.state.age} />
</div>
)
}
}
//子组件
class Check extends React.Component{
render(){
return (
<div>
{
/* 传递接收到父组件传的的age直接传递给当前组件的子组件 */}
<List age={
this.props.age} />
</div>
)
}
}
//孙组件
class List extends React.Component{
render(){
return (
<div>
<p>接收age:{
this.props.age}</p>
</div>
)
}
}
兄弟
使用（父—子）和（子—父）结合完成