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>