React+TS中使用插槽进行数据的传递

场景:父组件通过发送请求获得了数据,需要将数据传递到子组件中进行渲染,作用例子:List或UL=>Li

步骤:

一:父组件中引入子组件

import SubjectSList from "../../components/SubjectSList/SubjectSList"

二:父组件发起请求获得数据

//获取首页全部数据
const [dataArray, setdataArray] = useState<IData>()
​
const GETHomeDataAction = async () => {
     let res = await GETHomeDataApi()
     setdataArray(res.data as IData)
}
    
useEffect(() => {
    GETHomeDataAction()
}, [])

三:将数据进行渲染

<div>
     {dataArray?.exemItems.map((item, index) => {
          return (
             <SubjectSList title={item.title} itemCount={item.itemCount} key={index}></SubjectSList>
                 )
     )}
</div>

• SubjectSList 是自定义的子组件, 通过将首页数据 dataArray 中特定的数组 exemItems 解构出每一个item并通过插槽进行数据传输

• title 与 itemCount 即为要传递的参数的数据名

四:子组件中定义父传子定义规范

type Props = {
    title: string,
    itemCount: number
}

• 通过对传递数据的名字赋值类型使得参数可以进行交互

五:子组件中定义常量名

//通过向形参中填写 props 与其约束来达成参数传递
export default function SubjectSList(props: Props) {
    
    //声明常量名,使其可以被调用
    const { title, itemCount } = props
​
    return (
        ......
    )}

六:子组件中进行调用

通过 { } 与常量名进行数据提取与调用

export default function SubjectSList(props: Props) {
    //路由
    const nav = useNavigate()
    const { title, itemCount } = props
​
    return (
                    <div className='text'>
                        <p className='ListIcon'>{title}</p>
                        <p>{itemCount}/{itemCount}题</p>
                    </div>
                    <div className='button' onClick={() => {
                        nav("/selectmain")
                    }}>
                        练习
                    </div>
    )}