You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
911 B
45 lines
911 B
import React from 'react'
|
|
// APP 为父组件,Son 为子组件
|
|
// 父传子:props + 函数
|
|
// 子传父:子组件通过父组件传递过来的函数,并且把想要传递的数据当成函数的实参传入即可
|
|
|
|
function Son(props) {
|
|
const { message, changeMessage } = props
|
|
|
|
function handleClick() {
|
|
changeMessage('this is 666')
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{message}
|
|
<button onClick={handleClick}>
|
|
click
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
class App extends React.Component {
|
|
state = {
|
|
message: 'this is message'
|
|
}
|
|
|
|
changeMessage = (newMessage) => {
|
|
console.log('子组件传递的数据', newMessage)
|
|
this.setState({
|
|
message: newMessage
|
|
})
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<div>父组件</div>
|
|
<Son message={this.state.message} changeMessage={this.changeMessage}></Son>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default App
|