有一段示例代码:
import React from 'react'
interface FormProps<T> {
values: T,
children: (values: T) => React.ReactElement
}
const Form = <T extends {}>({values, children}: FormProps<T>) => {
return children(values)
}
const App: React.FC = () => {
return (
<div className='App'>
<Form <{lastName: string | null}> values = {{ lastName: "leo" }}>
{values => <div>{values.lastName}</div>}
</Form>
</div>
)
}
export default App
请问一下
1、Form这个组件:
定义:
interface FormProps<T> {
values: T,
children: (values: T) => React.ReactElement
}
const Form = <T extends {}>({values, children}: FormProps<T>) => {
return children(values)
}
使用:
<Form <{lastName: string | null}> values = {{ lastName: "leo" }}>
{values => <div>{values.lastName}</div>}
</Form>
请问下:
1)我们传Props的参数是否可用props方式,也可用slot方式?
是否Props的children参数,只能用slot的方式传递?
2)一般约定俗成而言,children都是传递<xxx>子组件是吗?
1."slot"这个在React里用的不是很多,更多的是在Vue里用,React用Props传数据,函数、组件之类的,Props的children参数也是Props,Props里的子元素
2.对的,这样父组件可以灵活的控制子组件