11. 函数式组件 与 hook

This commit is contained in:
shikong 2024-10-27 21:21:37 +08:00
parent 7a5691d557
commit ae6656d5ae
Signed by: Shikong
GPG Key ID: BD85FF18B373C341

View File

@ -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>
}