react 通过父组件实现子组件之间交互

5477呀

于 2023-01-04 15:58:00 发布

阅读量161

点赞数

分类专栏：前端文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/qq_35976548/article/details/128549441

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

A组件和B组件是兄弟组件，A组件要调用B组件的某个方法并刷新B组件某数据。

实现逻辑：

1.将A和B包在一个父组件C下
2.将B组件本身传递给父组件C
3.父组件C把B组件的某个函数传递给A组件，供其调用。

代码如下：

实现：Tom和Jack是同班同学。Tom有8本书，Jack有9本书。Tom找Jack借两本书。
父组件Class,子组件Tom和Jack。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
	<script src="jquery.min.js" ></script>
    <script src="bootstrap.min.js" ></script>
    <link   href="bootstrap.min.css" rel="stylesheet" >
	<script src="react.development.js" ></script>
    <script src="react-dom.development.js" ></script>
    <script src="babel.min.js" ></script>
  </head>
  <body>
    <h1>通过父组件实现子组件之间相互调用</h1>
	<h2>实现：Tom和Jack是同班同学。Tom有8本书，Jack有9本书。Tom找Jack借两本书。</h2>
	<div id="classDiv"></div>
	<script type="text/babel">
		class Tom extends React.Component {
		  constructor(props) {
			super(props);
			this.state = {
			  booksNum : 8
			};
		  }
		  
		  //借出
		  lend=(num)=>{
			//通过修改State，重新渲染Tom书本数量
			this.setState({
			  booksNum: this.state.booksNum-num
			})
		  }
		  	
		  componentDidMount(){
			//将Tom传给父组件Class
			this.props.onRef&&this.props.onRef(this)
		  }
		 
		  render() {
			return (
			  <div>Tom：我有 {this.state.booksNum} 本书。</div>
			);
		  }
		}
		
		class Jack extends React.Component {
		  constructor(props) {
			super(props);
			this.state = {
				booksNum : 9
			};
		  }
		  
		  btnClick(pParam,event){
			//调用Tom的lend方法进行借书操作
			this.props.onClick&&this.props.onClick(pParam)
			//通过修改State，重新渲染Jack书本数量
			this.setState({
			  booksNum: this.state.booksNum+pParam
			});
		  }

		  render() {
			return (
			  <div >
			    Jack：我有 {this.state.booksNum} 本书。
				<button onClick={this.btnClick.bind(this,2)} >找Tom借2本</button>
			  </div>
			  
			);
		  }
		}

		class Class extends React.Component {
		  constructor(props) {
			super(props);
			this.state = {
			};
		  }
		  onRef=(ref)=>{
			this.Tom=ref;
		  }
		 
		  render() {
			return (
			  <div className="Class">
				<Tom onRef={this.onRef} />
				<Jack onClick={
				  (pBooksNum)=>{
					this.Tom.lend&&this.Tom.lend(pBooksNum)
				  }
				} />
			  </div>
			);
		  }
		}
		ReactDOM.render(
			<Class />,
			document.getElementById('classDiv')
		);
		
	</script>
  </body>
</html>