父组件向子组件通信
<Timer order={order} /> //倒计时组件
在子组件里直接通过props获取父组件传递过来的参数,如下:
let order = this.props.order;//订单详情
子组件向父组件通信
子组件更新组件状态,通过回调函数的方式传递给父组件。
子组件调用父组件通过props传给它的函数更新父组件state,进而完成子组件向父组件的通讯。
先看父组件
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
//导入子组件
import Child from './child.js';
class App extends Component {
constructor(props){
super(props);
this.state = {
msg: '父组件初始msg'
}
}
//父组件回调函数,更新state,进而更新父组件。
callback=(msg)=>{
// setState方法,修改msg参数,值是由子组件传过来。
this.setState({msg});
}
render() {
return (
<div className="App">
<p>子组件传值实验: {this.state.msg}</p>
<Child callback={this.callback} ></Child>
</div>
);
}
}
export default App;
再看子组件
import React from "react";
class Child extends React.Component{
constructor(props){
super(props);
this.state={
msg: '子组件msg传值'
}
}
//通过props调用回调函数传值
trans=()=>{
this.props.callback(this.state.msg);
}
render(){
return(
<div>
<button onClick={this.trans}>激发trans事件,传值给父组件</button>
</div>
)
}
}
export default Child;