краткий и читаемый синтаксис для реквизита в реагирующем компоненте в машинописи

Question

Таким образом, если вы объявляете React.FC, тогда вы можете сделать объявление типа и, таким образом, передать его реквизиты:

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: any; } 'нельзя назначить типу IntrinsicAttributes & {children ?: ReactNode; }». Свойство tankData не существует для типа IntrinsicAttributes & {children ?: ReactNode; } '.

Эти учебные пособия указывают на то, что нет другого способа объявить компоненты:

https://riptutorial.com/reactjs/example/25321/declare-default-props-and-proptypes https://medium.com/@cristi.nord / props -и-как-передать-пропадает-на-компоненты-в-реакции-часть-1-b4c257381654

Я нашел эту статью об ошибках TypeScript в React: https://medium.com/innovation-and-technology/deciphering-typescripts-react-errors-8704cc9ef402, но у меня не было этой проблемы.

Я также попробовал это решение: { ссылка }. Хотя это явно не та проблема, она казалась несколько близкой, но это не помогло.

Документы React не помогают, поскольку они игнорируют TypeScript и не читаются человеком.

I нужен способ, который является одновременно лаконичным, уважает TypeScript и учитывает как реквизиты, так и методы в теле класса. Это вообще не существует?

Answer 1

Но вы не можете объявить какие-либо методы или использовать там хуки (я не нашел способа)

Хороший стандартный способ объявления F C:

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>
  )
}

Обратите внимание, что в приведенном выше примере я деконструирую реквизит при создании экземпляра, чтобы id, nationality можно было использовать непосредственно в компоненте.

Я не думаю, что вам нужно слишком беспокоиться о подсветке синтаксиса, пока вы не ознакомитесь с вышеизложенным.