react学习笔记12:组件之间交互

前端之家收集整理的这篇文章主要介绍了react学习笔记12:组件之间交互前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我们创建一个新的项目, component-test 专门学习我们的组件交互。

利用create-react-app工具

create-react-app component-test
cd component-test
npm start

修正代码

index.html:

<!doctype html>
<html lang="en">
  <head>
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <Meta name="theme-color" content="#000000">

    <title>组件交互</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

把其他文件全部删除即可!

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
  render() {
    return (
		<div>
			组件交互
		</div>
    );
  }
}


ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

组件之间的关系可简单分为:

父子组件

爷孙组件

兄弟组件

当前和兄弟的子组件

当前和兄弟的孙组件

1.父子组件交互

1.1父组件传值给子组件

我们使用的就是this.props.xx接收和显示

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';

import registerServiceWorker from './registerServiceWorker';


class Test extends Component {
	
	constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            msg1: "1儿子你好",msg2: "2儿子你好"
        };

    }
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话:{this.state.msg1}</p>
				<p>给2儿子说的话:{this.state.msg2} </p>
				<div>
					我是1儿子组件:<Sub1 msg={this.state.msg1} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div>收到爸爸的问候:{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候:{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

我们看到效果

调用位置利用某个属性设置要传递的值,在子组件的this.props就会获取到!

1.2子组件传话给父组件

我们的需求是这样的,我们点击1儿子的一个按钮,通知父组件我收到了你的问候,把父组件对1儿子的问候语改为:

“谢谢1儿子的回复

既然父组件可以把状态值传给子组件,那么我们就把父组件的一个方法传给子组件,这个父组件的方法就是改变msg1的值:

全部代码

import React,msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话:{this.state.msg1}</p>
				<p>给2儿子说的话:{this.state.msg2} </p>
				<div>
					我是1儿子组件:<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候:{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候:{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

我们点击之后:

变为:

2.爷孙组件交互

2.1爷孙传值

我们给1儿子加2个儿子,出现2孙子:

儿子1给他的儿子传值:

2个孙子:

全部代码

import React,msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话:{this.state.msg1}</p>
				<p>给2儿子说的话:{this.state.msg2} </p>
				<div>
					我是1儿子组件:<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候:{this.props.msg}</div>
			我的儿子1:<Three1 msg={this.props.msg} />
			我的儿子2<Three2 msg={this.props.msg} />
		</div>
    );
  }
}

class Three1 extends Component {
  render() {
    return (
		<div>
			我是孙子1(爸爸是1儿子)
			<div>收到爷爷的问候:{this.props.msg}</div>
		</div>
    );
  }
}
class Three2 extends Component {
  render() {
    return (
		<div>
			我是孙子2(爸爸是1儿子)
			<div>收到爷爷的问候:{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候:{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

同理,非常简的处理,就是不断传递

2.2孙子传话给爷爷

其实同上面的原理,我们直接修改代码

点击修改

全部代码

import React,msg2: "2儿子你好"
        };

    }
	
	setMsg1() {
		this.setState({msg1:"谢谢1儿子的回复"})
	}
		
	render() {
		return (
			<div>
				组件交互
				<p>给1儿子说的话:{this.state.msg1}</p>
				<p>给2儿子说的话:{this.state.msg2} </p>
				<div>
					我是1儿子组件:<Sub1 msg={this.state.msg1} setMsg1={this.setMsg1.bind(this)} />
				</div>
				<div>
					我是2儿子组件<Sub2 msg={this.state.msg2} />
				</div>
			</div>
		);
	}
}

class Sub1 extends Component {
  render() {
    return (
		<div>
			我是儿子1
			<div onClick={this.props.setMsg1}>收到爸爸的问候:{this.props.msg}</div>
			我的儿子1:<Three1 msg={this.props.msg}  setMsg1={this.props.setMsg1} />
			我的儿子2<Three2 msg={this.props.msg} />
		</div>
    );
  }
}

class Three1 extends Component {
  render() {
    return (
		<div>
			我是孙子1(爸爸是1儿子)
			<div onClick={this.props.setMsg1}>收到爷爷的问候:{this.props.msg}</div>
		</div>
    );
  }
}
class Three2 extends Component {
  render() {
    return (
		<div>
			我是孙子2(爸爸是1儿子)
			<div>收到爷爷的问候:{this.props.msg}</div>
		</div>
    );
  }
}

class Sub2 extends Component {
  render() {
    return (
		<div>
			我是儿子2
			<div>收到爸爸的问候:{this.props.msg}</div>
		</div>
    );
  }
}

ReactDOM.render(<Test />,document.getElementById('root'));
registerServiceWorker();

3.兄弟组件交互

这个我们就不多说了,其实都是子组件传话给父组件的原理,要通过兄弟之间的父组件作为交互桥梁

猜你在找的React相关文章