React中我们传Props的参数是否可用props方式,也可用slot方式?

有一段示例代码:

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.8k
2 个回答

1."slot"这个在React里用的不是很多,更多的是在Vue里用,React用Props传数据,函数、组件之类的,Props的children参数也是Props,Props里的子元素
2.对的,这样父组件可以灵活的控制子组件

React 里哪来的 slot?你这是跟 Vue 弄混了?

React 里实现类似的功能是通过 props.children 的。


难不成你管 JSX 里这部分叫 Slot 了?

image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏