Как правильно передать функцию хука через props к дочернему компоненту?

Question

[Anastasia Tovma]

Я хочу передать функцию setIsEditinf через props из родительского в дочерний компонент, но в процессе у меня возникает рад ошибок, которые мне не удается решить. Пожалуйста, подскажите направление.

Comments

[WbICHA]

status.status(false)

[WbICHA]

И да, отличная типизация. Как и код скриншотом.

[Anastasia Tovma]

WbICHA, спасибо за быстрый ответ. Я еще (о-очень) новичок в программировании и не успеваю охватить много важных вещей. Поэтому я была бы очень признательна за прямые исправления, а не двусмысленные комментарии. И все же мне приятно, что вы нашли минутку для меня:)

P.S.: Теперь мне ясно, что код так не выставляется.

Answer 1

[Alexandroppolus]

Надо бы протипизировать по нормальному. Встала на праведную стезю TS - забудь про всякие any.

...
<RegulationEditWindow setIsEditing={setIsEditing} />
...

interface RegulationEditWindowProps {
    setIsEditing(editing: boolean): void;
}

const RegulationEditWindowView: React.FC<RegulationEditWindowProps> = React.memo((props) => {
    ...
    <ArrowLeftOutlined onClick={() => props.setIsEditing(false)} />
    ...
});

Comments

[Anastasia Tovma]

Большое спасибо за помощь! Я очень благодарна:) Правда мне нужно еще разобраться что здесь к чему [facepalm]

[Alexandroppolus]

Anastasia Tovma, в первом куске кода я просто поменял название пропа. Теперь там в RegulationEditWindow передается проп, который называется setIsEditing.

Во втором куске сначала описываем, какие пропы получает компонент. Потом создаем сам компонент, объявляя его не как функцию, а как переменную через const. Этой переменной сразу задаем тип React.FC, благодаря чему далее не нужно указывать тип аргумента props и возвращаемое значение, TS всё берет из типа, и это удобно.

React.memo пока не смотри, это оптимизация, до неё позже доберешься, если надо будет периодически пилить фронт.

[Anastasia Tovma]

Alexandroppolus, wow! Спасибо огромное, теперь знаю в какую сторону читать!
Так ещё и на пояснение напросилась:)

А вы (вдруг) не подскажите хороший tutorial по react? Я верстальщик из которого намерены вырастить фронтендера, чему я несказанно рада:)

[Alexandroppolus]

Anastasia Tovma, начать правильнее отсюда - https://learn.javascript.ru/ . Если осилишь этот учебник, будешь знать JS как богиня.
Потом раскурить TS, типизацию. https://www.typescriptlang.org/docs/handbook/intro.html в принципе неплох.

Далее, встав туфельками на такой крепкий фундамент, можно упороться в Реакт. Поскольку ты уже более-менее понимаешь суть, то можно смотреть прямо в официальную доку - https://ru.reactjs.org/docs/getting-started.html. Там пишут доходчиво, подробно, внятно.

Параллельно, в фоновом режиме, читай https://developer.mozilla.org/en-US/. Это общефронтовые темы.

Вот примерно такой планчик. Все упомянутые ссылки - каноничны, без ереси. Что не может не радовать. Понятно, что это не всё, но это каркас, а всё остальное можно навесить при необходимости.

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

[Anastasia Tovma]

Alexandroppolus, уииии! Класс! О большем и мечтать нельзя! Спасибо:)