Question

我正在创建一些按钮组件，我有一些我需要的自定义道具，并希望它们按流检查。但由于它们是按钮，我还希望HTML按钮元素中的任何其他道具，但不想键入全部检查。

有没有办法做出反应或者使用npm包让我输入检查我的新自定义道具并让组件接收任何其他道具？或者可能仅限于HTML定义的那些？

Answer 1

你应该能够将其余的道具传递给它而不需要为它添加类型注释。

示例：

import React, { type Node } from 'react'

type Props = {
  primary?: boolean,
  children: Node
}

function Button({ primary, children, ...props }: Props) {
  return (
    <button 
      className={primary ? 'is-primary' : ''}
      {...props}
    >
      {children}
    </button>
  )
}

export default Button

用法：

function App() {
  return (
    <div>
      <Button primary onClick={() => console.log('clicked!')}>
        Click Me
      </Button>  
    </div>
  )
}

您也可以在flow.org/try上查看。

在反应中如何使用flow来键入只检查某些道具，但忽略其他任何道具？

1 个答案: