11. 函数式组件 与 hook
This commit is contained in:
parent
7a5691d557
commit
ae6656d5ae
@ -73,7 +73,7 @@ export default function SonComponent2(props= {
|
||||
return <div style={{border: '1px solid', width: '80%', overflow: 'auto'}}>
|
||||
子组件2
|
||||
|
||||
<div style={{border: '1px solid', width: '80%', overflow: 'auto', margin: 'auto'}}>
|
||||
<div ref={ref} style={{border: '1px solid', width: '80%', overflow: 'auto', margin: 'auto'}}>
|
||||
<div>
|
||||
{state.msg}
|
||||
</div>
|
||||
@ -84,7 +84,7 @@ export default function SonComponent2(props= {
|
||||
<div>
|
||||
{props.msg}
|
||||
<div>count: {countMemo}</div>
|
||||
<Consumer ref={ref} changeMsg={changeMsg} revokeChangeMsg={revokeChangeMsg}/>
|
||||
<Consumer changeMsg={changeMsg} revokeChangeMsg={revokeChangeMsg}/>
|
||||
</div>
|
||||
</ContextParent.Provider>
|
||||
</div>
|
||||
@ -98,7 +98,7 @@ function Consumer(props){
|
||||
console.log("SonComponent2 Consumer contextValue", contextValue)
|
||||
|
||||
return <div>
|
||||
<button ref={props.ref} onClick={props.changeMsg}>{contextValue.changeText}</button>
|
||||
<button onClick={props.changeMsg}>{contextValue.changeText}</button>
|
||||
<button onClick={props.revokeChangeMsg}>{contextValue.revokeText}</button>
|
||||
</div>
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user