打字稿中React组件中prop的简洁可读语法

Question

因此，如果您声明React.FC，那么您将进行类型声明并因此将其传递给props：

const FuntionalComponent: React.FC<personType> = ({ id, nationality, name, familyName, age, selected }) =>

    <div>
       ...directly html
    </div>

export default FuntionalComponent;

但是您不能在其中声明任何方法或使用钩子（我还没有找到方法）

然后是React.Component类型：

class Component extends React.Component<{}, {Stateproperty: string}>{

  constructor(){
  }

  hook(){
  }

  method(){
  }

  render() {
    return (
      <div>
         ...html finally
      </div>
    )
  }
}

export default component;

如您所见，我可以通过一个州，但不能通过一个道具。

如果我尝试这样的事情：

class Component extends React.Component<{propsProperty: Array}, {Stateproperty: string}>{

然后将我的propsProperty添加到我的html中：

<Component propsProperty={thisArray} />

但是，他们输入以下错误：

TS2322：类型'{propsProperty：任何； }'不可分配给type'IntrinsicAttributes＆{子代？：ReactNode; }'。属性'tankData'在类型'IntrinsicAttributes＆{children ?:ReactNode; }'。

这些教程似乎表明没有其他方法可以声明组件：

https://riptutorial.com/reactjs/example/25321/declare-default-props-and-proptypeshttps://medium.com/@cristi.nord/props-and-how-to-pass-props-to-components-in-react-part-1-b4c257381654

我在React中找到有关TypeScript错误的本文：https://medium.com/innovation-and-technology/deciphering-typescripts-react-errors-8704cc9ef402，但没有我的问题。

我也尝试过此解决方案：https://stackoverflow.com/a/47395464/4770754。即使显然不是同一问题，它似乎也很接近，但无济于事。

反应文档无济于事，因为它们会忽略TypeScript并且不易阅读。

我需要一种既简洁又尊重TypeScript的方法，并允许在类主体内使用prop和方法。这根本不存在吗？

Answer 1

但是您不能在其中声明任何方法或使用钩子（我还没有找到方法）

声明FC的一种好的标准方法是：

type ComponentProps = {
  id: string, 
  nationality: string, 
  ...
}

const MyComponent: React.FC<ComponentProps> = ({
  id, 
  nationality, 
  ...rest
  }: ComponentProps) => {

  const someMethod = () => {
    console.log('I am console logging');
  }


  return(
    <div>
      {*/HERE YOU WILL RENDER STUFF/*}
    </div>
  )
}

注意，在上面我解构了实例化的props，以便可以在组件中直接利用id，nationality。

除非您熟悉上述内容，否则我不必担心语法高亮。