Shikong/react-study-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11. 函数式组件 与 hook

Browse Source
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
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/SonComponent2.js
View File

@ -73,7 +73,7 @@ export default function SonComponent2(props= {
return <div style={{border: '1px solid', width: '80%', overflow: 'auto'}}> return <div style={{border: '1px solid', width: '80%', overflow: 'auto'}}>
子组件2 子组件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> <div>
{state.msg} {state.msg}
</div> </div>
@ -84,7 +84,7 @@ export default function SonComponent2(props= {
<div> <div>
{props.msg} {props.msg}
<div>count: {countMemo}</div> <div>count: {countMemo}</div>
<Consumer ref={ref} changeMsg={changeMsg} revokeChangeMsg={revokeChangeMsg}/> <Consumer changeMsg={changeMsg} revokeChangeMsg={revokeChangeMsg}/>
</div> </div>
</ContextParent.Provider> </ContextParent.Provider>
</div> </div>
@ -98,7 +98,7 @@ function Consumer(props){
console.log("SonComponent2 Consumer contextValue", contextValue) console.log("SonComponent2 Consumer contextValue", contextValue)
return <div> 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> <button onClick={props.revokeChangeMsg}>{contextValue.revokeText}</button>
</div> </div>
} }