简单父子组件通信
天气信息传递:
效果展示
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
message: '数据还未到'
}
}
changeMsg() {
this.setState({
message: '今天天气很好'
})
}
render() {
return (
<div>
<h1>hello 今天天气怎么样</h1>
<Tianqi message={this.state.message} fn={this.changeMsg.bind(this)}></Tianqi>
</div>
)
}
}
function Tianqi(props) {
return (
<div>
<p>{props.message}</p>
<button onClick={props.fn}>click</button>
</div>
)
}
ReactDOM.render(<App/>, document.querySelector('#root'))
![](https://img.haomeiwen.com/i16572102/9f351503910bbb06.png)
网友评论