Как в react typescript передать props и children в компонет?

Question

[balex777]

Есть компонент

import React from 'react';
import BackButton from 'components/buttons/BackButton';

type PropTypes = {
  title: string,
  goBackText?: string,
  children?: React.ReactElement,
} & typeof defaultProps;

const defaultProps = {
  goBackText: '',
  children: null,
};

const NamePagesBar = ({
  title, goBackText, children,
}:PropTypes) => (
  <div className="mx-auto px-4 h-18 flex items-center flex justify-between">
    <h1>{title}</h1>
    {goBackText && (
      <BackButton text={goBackText} className="flex items-baseline text-sm text-blue hover:text-blue-dark underline " />
    )}
    {children}
  </div>
);

NamePagesBar.defaultProps = defaultProps;

export default NamePagesBar;

Пытаюсь туда передать

<NamePagesBar title={title}>
        <button>efreasrf</button>
      </NamePagesBar>

Выдает такие ошибки



Думаю проблема в том что у children есть defaultProps, потому что в другим местах делал, что то подобное но там children был обязательным и проблем не было
PS пробовал для children ставить тип ReactNode но вебшторм выдает ошибку что кнопка это Element
Как сделать правильно?

Answer 1

[Alexandroppolus]

defaultProps неактуален в TS

type PropTypes = {
  title: string
  goBackText?: string
};

const NamePagesBar: React.FC<PropTypes> = ({title, goBackText = ''}) => (<...>);

Comments

[balex777]

Хм странно) Везде про него пишут, и везде у меня работает.
Хорошо, как тогда указать children по дефолту если его не передают? проблема именно в нем

[Алексей Абрамов]

balex777, children?: React.ReactNode;

[balex777]

Алексей Абрамов, пробовал, тогда button выдает ошибку, что это Element и не принадлежит типу null | undefined

[Alexandroppolus]

balex777,

как тогда указать children по дефолту если его не передают?

так же, как остальные.
причем тебе не надо его дописывать в type PropTypes
React.FC сам это сделает

[balex777]

Alexandroppolus, строкой children: ' ' что ли. То что ты пишешь не надо добавлять в PropTypes, я хз но мой WebShtorm и typescript компилятор такого не признает и выдает ошибки что children нет в PropTypes

[nowm]

balex777, а вам реально нужно в коде писать «& typeof defaultProps», когда вы делаете «type PropTypes =»?. Просто вы и так уже описали, что goBackText — это строка, а children — это React.ReactElement, и когда вы добавляете «typeof defaultProps», вы искажаете описание типа. Вместо этого можно написать так:

type PropTypes = {
  title: string,
  goBackText?: string,
  children?: React.ReactElement | null,
};

[balex777]

nowm, не работает так тоже, то что касается дефолта, я пользуюсь лучшими практиками и такой способ указания дефолтных пропс, у самого тайпскрипта описан в гитхабе, в общем у каждого свой подход) задачу я решил. Выше описал как, спасибо за помощь

[Alexandroppolus]

balex777,

вот с чилдреном:

type PropTypes = {
  title: string
  goBackText?: string
};

const NamePagesBar: React.FC<PropTypes> = ({title, goBackText = '', children}) => (<...>);

обрати внимание, children по прежнему не надо в PropTypes. Потому что FC добавляет его сам. Просто открой через Ctrl + клик (или Cmd + клик) определение FC и увидишь.

[balex777]

Alexandroppolus ,

ошибка вот

[nowm]

balex777, фишка в том, что когда вы делаете это:

type PropTypes = {
  title: string,
  goBackText?: string,
  children?: React.ReactElement,
} & typeof defaultProps;

вы перезаписываете тип для children, если в defaultProps есть поле children. Вы можете написать, что «children?: Number», имея ввиду, что это необязательное свойство, а если оно есть, то должно быть числом, но как только вы добавляете «& typeof defaultProps», вы перезаписываете это, если в defaultProps есть поле children. То есть откидывается информация о том, что это необязательное поле и то, что оно должно быть числом. Это происходит из-за использования оператора «&», который в случае с объектами работает таким образом, что поле children следующего объекта полностью заменяет поле children предыдущего объекта.

Про лучшие практики спорить не буду. Но факты говорят сами за себя: либо это не лучшие практики, либо вы им не правильно следуете. Иначе ошибок не было бы.

[Alexandroppolus]

balex777,
добавь "react/require-default-props": 0,
в .eslintrc

[balex777]

Alexandroppolus, nowm, Сделал вот так, все работает

[Alexandroppolus]

balex777, замени {children || ''} на {children}

[balex777]

Alexandroppolus, Сделал, правильно я понимаю, что то что я других компонетах дедал такие конструкции с

type PropTypes = {
  title: string,
  goBackText?: string,
  children?: React.ReactElement,
} & typeof defaultProps;

Это не правильно и defaultProps лучше не юзать?

[Alexandroppolus]

balex777, да. defaultProps - не нужен, children в определении типа - не нужен.

[balex777]

Спасибо, буду теперь знать