React 大佬有没有， ts 有办法在编译阶段限制 react 子组件的参数类型吗

lblblong · 2020-08-25T08:46:03Z

比如有一个 Form 组件，它需要所有子组件都有 name 字段 // 这里写的时候会报错，因为没有 name 字段还有就是 form 可以限制子组件参数的类型，比如： interface IUserSchema { username: string sex: 1 | 2 } // 这里写的时候会报错，因为没有 age 字段注意，以上都需要在编译阶段就过不了 interface IProps { children?: // 这里的类型需要怎么写才能实现上面的需求呢? } export const Form: FunctionComponent = ({ children }) => { return {children} }

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

› React

This topic created in 2073 days ago, the information mentioned may be changed or developed.

比如有一个 Form 组件，它需要所有子组件都有 name 字段

<Form>
    <Input name="username"></Input>
    <Select name="sex"></Select>
    
    // 这里写的时候会报错，因为没有 name 字段
    <div></div>
</Form>

还有就是 form 可以限制子组件参数的类型，比如：

interface IUserSchema {
    username: string
    sex: 1 | 2
}

<Form schema={IUserSchema}>
    <Input name="username"></Input>
    <Select name="sex"></Select>
    
    // 这里写的时候会报错，因为没有 age 字段
    <Input name="age"></Input>
</Form>

注意，以上都需要在编译阶段就过不了

interface IProps {
  children?: // 这里的类型需要怎么写才能实现上面的需求呢? 
}

export const Form: FunctionComponent<IProps> = ({ children }) => {
  return <form>{children}</form>
}

5 replies • 2020-08-26 10:21:05 +08:00