父组件到子组件
class App extends Component {
constructor(props){
super(props)
this.state = {
msg: 'msg from parent'
}
}
handleClick(){
this.setState({
msg: this.state.msg.split('').reverse().join('')
})
}
render() {
return (
<div>
<h3 onClick={this.handleClick.bind(this)}>我是父组件 => {this.state.msg}</h3>
<Son msg={this.state.msg} />
</div>
)
}
}
class Son extends Component {
render() {
return (
<h5>我是子组件 => {this.props.msg}</h5>
)
}
}
子组件到父组件
class App extends Component {
constructor(props) {
super(props)
this.state = {
number: '__'
}
}
getData(data) {
this.setState({
number: data
})
}
render() {
return (
<div>
<h3>小明今天吃了几个鸡腿 ?</h3>
<p>答:{`吃了${this.state.number}个`}<Son sendData={this.getData.bind(this)}/></p>
</div>
)
}
}
class Son extends Component {
constructor(props) {
super(props)
this.state = {
number: 10,
text: '(点我告诉你答案)'
}
}
handleClick(){
this.props.sendData(this.state.number)
this.setState({
text: ''
})
}
render() {
return (
<i style={{color: 'blue', cursor: 'pointer'}} onClick={this.handleClick.bind(this)}>
{this.state.text}
</i>
)
}
}