在包装器组件中继承 autocomplete/suggestion proptypes

Question

我正在围绕一个 chakraui 组件创建我自己的自定义“包装器”，这样我就可以添加我自己的道具、方法以及我以后可能需要的任何东西。

然而，这样做的一个缺点是我在 Visual Studio 代码中没有得到关于导入的 chakraui-Button 属性类型的建议，只有新的属性类型“testPropColor”。其他属性仍然有效，但是否有任何方法可以将它们进一步向下传递，以便我也可以将它们视为建议？

我有的是： custom-component/button.js

import { Button as ChakraButton } from '@chakra-ui/react'

export default function Button(properties) {
  const { testPropColor, children, ...props } = properties

  return (
    <ChakraButton color="testPropColor" {...props}>
      {children}
    </ChakraButton>
  )
}

以及我如何在视图中使用它：

import Button from 'custom-component/Button'

export default function ViewComponent() {
  return (
    <Button
      bg="red"
      testPropColor="blue">Test</Button>
  )
}

Answer 1

Javascript 没有 type 支持。所以 VSCode.

中没有 type-intellisense

我高度 highly highly 建议将 TypeScript 添加到你的 JS React项目。

例如：

interface ButtonProps extends ChakraButton { 
    // you need to get the `ChakraButton` properties type, from '@chakra-ui/react'. 
    // You should be able to import it.
    testPropColor: string;
    bg: string;

}
export function Button(properties: ButtonProps) {

}

只是我找到的一篇快速文章，例如 here。

如果出于某种原因您不添加 TS（？！。您真的应该添加）-> 那么有 prop-types，但与 TS 相比，我不建议使用它。

import PropTypes from 'prop-types';

祝你好运

在包装器组件中继承 autocomplete/suggestion proptypes

Inherit autocomplete/suggestion proptypes in wrapper component

reactjs

next.js

chakra-ui