Table of contents
1. Subcomponents pass values to parent components
1.1 Code
// 父组件
class Parent extends React.Component{
state = {
parentMsg:''
}
getChildMsg = (data) => {
console.log(data);
this.setState({
parentMsg : data
})
}
render(){
return(
<div className='parent'>
{
/* 父组件 */}
父组件：{
this.state.parentMsg}
<Child getMsg={
this.getChildMsg} />
</div>
)
}
}
//子组件
class Child extends React.Component {
state = {
msg:'上号'
}
handleClick = () => {
//子组件调用父组件中传递过来的回调函数
this.props.getMsg(this.state.msg)
}
render(){
return(
<div className='child'>
<p>子组件<button onClick={
this.handleClick}>传递给父组件</button></p>
</div>
)
}
}
const container = createRoot(document.getElementById('root'))
container.render(<Parent />)
1.2 Effect
After clicking
button:
1.3 Principle
- Using the callback function, the parent component provides a callback, the child component calls, and the data to be passed is used as the parameter of the callback function
- The parent component provides a callback function to receive data
- Pass the function as the value of the property to the child component
- The child component calls the callback function through props
2. Pass value from parent component to child component
2.1 Code
//父组件
class Parent extends React.Component{
state = {
lastName:'张'}
render(){
return(
<div className='parent'>
父组件
传递给子组件<Child name={
this.state.lastName} />
</div>
)
}
}
//子组件
const Child = (props) =>{
return (
<div className='child'>
<p>子组件，接收到父组件的数据：{
props.name}</p>
</div>
)
}
const container = createRoot(document.getElementById('root'))
container.render(<Parent />)
2.2 Effect
2.3 Principle
- The parent component provides the state data to be passed
- Add an attribute to the subcomponent tag, the value is the data in the state
- The child component receives the data passed in the parent component through props
3. Brother pass value
3.1 Code
//父组件
class Counter extends React.Component {
//通过共享状态
state = {
count : 0
}
//提过修改状态的方法
onIncrement = () => {
this.setState({
count:this.state.count + 1
})
}
render(){
return(
<div>
<Child1 count={
this.state.count} />
<Child2 onIncrement={
this.onIncrement} />
</div>
)
}
}
const Child1 = (props) => {
return <h1>计数器：{
props.count}</h1>
}
const Child2 = (props) => {
return <button onClick={
() => props.onIncrement()}>+1</button>
}
const container = createRoot(document.getElementById('root'))
container.render(<Counter />)
3.2 Effect
Click buttonto add one
3.3 Principle
- Promote shared state (data) to the nearest common parent component, which manages this state
- This is called state promotion
- Public parent component responsibilities: 1. Provide shared state 2. Provide methods for manipulating shared state
- Subcomponents to communicate only need to receive state or methods of manipulating state via props
4.Context
If there are many levels (for example: grandpa passing data to grandson), we will use Context to transfer
Role: Pass data across components
4.1 Code
// Provider提供者: Consumer:消费者
const {
Provider,Consumer } = React.createContext()
class App extends React.Component{
render(){
return(
<div className='app'>
<Node />
</div>
)
}
}
const Node = (props) => {
return(
<Provider value='Zhang'>
<div className='subnode'>
<Child/>
</div>
</Provider>
)
}
const Child = (props) => {
return <div className='child'>
<Consumer>
{
data => <span>子节点：{
data}</span>
}
</Consumer>
</div>
}
const container = createRoot(document.getElementById('root'))
container.render(<App />)
4.2 Effect
4.3 Principle
- If there are many levels between two components, you can use Context to realize component communication
- Context provides two components: Provider and Consumer
- Provider component: used to provide data
- Consumer component: used to consume data