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

7. 插槽

Browse Source
This commit is contained in:
shikong 2024-10-26 14:28:18 +08:00
parent c70b581393
commit e13c5669ed
Signed by: Shikong
GPG Key ID: BD85FF18B373C341
4 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -11,6 +11,7 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"proptypes": "^1.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",
@ -14521,6 +14522,11 @@
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"node_modules/proptypes": {
"version": "1.1.0",
"resolved": "https://registry.npmmirror.com/proptypes/-/proptypes-1.1.0.tgz",
"integrity": "sha512-589N0gHNvg6ocCDia1knxMwguEcZq1qyD8fVxFZEdZP0YKI+GTHyflsJH2mYE0YZbo1KNj5W8avdSR4iJDV+fw=="
},
"node_modules/proxy-addr": {
"version": "2.0.7",
"resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",

1
package.json
View File

@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"proptypes": "^1.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "5.0.1",

8
src/App.js
View File

@ -212,7 +212,13 @@ function App() {
justifyContent: 'center'
}}>
父组件
<SonComponent a={1} b={2} msg={"App Msg"}/>
<SonComponent a={1} b={2} msg={"App Msg"}
slot2={<div>SonComponent 插槽 slot2 (具名插槽)</div>}
scopeslot={(scope)=>{return <div>{scope}</div>}}>
<div>
SonComponent 插槽 slot1
</div>
</SonComponent>
</div>
</header>
</div>

28
src/components/SonComponent.js
View File

@ -1,4 +1,6 @@
import React from "react";
import PropTypes from "proptypes"
export default class SonComponent extends React.PureComponent {
state = {
msg: "SonComponent Msg"
@ -19,17 +21,33 @@ export default class SonComponent extends React.PureComponent {
<div>
{this.props.msg}
<div style={{margin: 'auto', border: '1px solid', width: '90%', overflow: 'auto'}}>
{this.props.children}
</div>
<div style={{margin: 'auto', border: '1px solid', width: '90%', overflow: 'auto'}}>
{this.props.slot2}
</div>
<div style={{margin: 'auto', border: '1px solid', width: '90%', overflow: 'auto'}}>
{this.props.scopeslot(<span>SonComponent 插槽 slot3 (作用域插槽) {this.state.msg}</span>)}
</div>
</div>
</div>
}
}
SonComponent.propTypes = {
msg: (props)=>{
if(typeof props.msg != "string"){
throw new Error("msg 必须为 string 类型")
}
}
// 自定义类型校验
// msg: (props)=>{
// if(typeof props.msg != "string"){
// throw new Error("msg 必须为 string 类型")
// }
// }
// 使用 proptypes 提供的类型校验
msg: PropTypes.string
}
SonComponent.defaultProps = {