React 从入门到进阶之路（七）
App.js
import React, {Component} from 'react';
import Home from './components/Home';
class App extends Component {
constructor(props) {
super(props);
this.state = {
title: "I am father"
}
}
fatherFunction = () => {
console.log("I am fatherFunction")
}
fatherSelf = () => {
console.log("I am fatherSelf")
}
getChildData = (name) => {
console.log(name)
}
render() {
return (
<div className="App">
<Home
title={this.state.title}
fatherFunction={this.fatherFunction}
father={this}
/>
</div>
);
}
}
export default App;
Home.js
import React, {Component} from 'react';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: "zhangsan",
}
}
render() {
return (
<div>
<p>Hello {this.state.name}</p>
{/*接收父组件的传值*/}
{this.props.title}
<br/><br/>
{/*接收父组件的 fatherFunction 方法*/}
<button onClick={this.props.fatherFunction}>调用父组件的fatherFunction方法</button>
<br/><br/>
{/*调用父组件的fatherSelf方法*/}
<button onClick={this.props.father.fatherSelf}>调用父组件的fatherSelf方法</button>
<br/><br/>
{/*子组件给父组件传值*/}
<button onClick={this.props.father.getChildData.bind(this, this.state.name)}>子组件给父组件传值</button>
</div>
);
}
}
export default Home;
我们在 App.js 的 render 中 插入 <Home /> 标签，即代表将子组件 Home 挂载到了父组件 App 中。
在父组件 App 标签 <Home /> 标签中传给子组件 Home：
值：
title={this.state.title}，
方法：
fatherFunction={this.fatherFunction}，
整个父组件 App：
father={this}
在子组件 Home 中：
通过 {this.props.title} 来获取父组件 App 的传值。
在子组件 Home 的 button 的 onClick 事件中绑定 {this.props.fatherFunction} 来获取父组件 App 传过来的方法。
在子组件 Home 的 button 的 onClick 事件中绑定 {this.props.father.fatherSelf} 来获取父组件 App 传过来整个 App 组件中的 fatherSelf 方法，在这里我们可以看出我们并没有向子组件中传递 fatherSelf 方法，但是我们将整个父组件传递给了子组件，所以子组件中能够调用父组件的所有方法和传值。
由于我们将整个父组件都传递给了子组件，在子组件中我们可以调用父组件的方法并将子组件的值传给父组件来完成父子组件间的通信。我们在子组件中通过 button 的 onClick 事件调用父组件的 getChildData 方法将 name 值传给父组件。onClick = {this.props.father.getChildData.bind(this, this.state.name)}。然后我们在父组件 App 中就可以获取到子组件 Home 传递过来的 name 值了。
运行结果如下：
以上就是父子组件间的通信，当然子组件向父组件传值和方法还可以通过 ref 和 refs 来实现。如下：
App.js
import React, {Component} from 'react';
import Home from './components/Home';
class App extends Component {
getChildData = () => {
console.log(this.refs.child.state.name);
this.refs.child.childFunction();
}
render() {
return (
<div className="App">
<Home ref="child"/>
<button onClick={this.getChildData}>获取子组件的传值和方法</button>
</div>
);
}
}
export default App;
Home.js
import React, {Component} from 'react';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: "zhangsan",
}
}
childFunction = () => {
console.log("I am child")
}
render() {
return (
<div>
<p>Hello {this.state.name}</p>
</div>
);
}
}
export default Home;
们在父组件 App 中挂载子组件 Home，并在标签<Home /> 中插入 ref="child"，意思是将子组件 Home 通过 ref 传过来。然后在父组件 App 中的 button 的 onClick 事件中定义 getChildData 方法，在该方法里可以通过 this.refs.child.state.name 来获取子组件 Home 的 name 值，通过 this.refs.child.childFunction() 来调用子组件 Home 的 childFunction 方法。
最后运行结果如下：
如果有想学习java的程序员，可来我们的java学习扣qun：830783865，免费送java的****噢！我每晚上8点还会在群内直播讲解Java知识，欢迎大家前来学习哦
以上是 React 从入门到进阶之路（七） 的全部内容， 来源链接： utcz.com/z/381895.html
