Блог

Главная - Вопросы по программированию - React typescript передает значение от дочернего элемента к родительскому

React typescript передает значение от дочернего элемента к родительскому

#reactjs #typescript

#reactjs #машинопись

Вопрос:

Я пытаюсь передать значение из дочернего компонента subject-section в родительский раздел. Однако интерфейс TypeScript не доволен этим. Я получаю сообщение об ошибке onUrlUpdate не существует в интерфейсе.

Итак, что я должен делать? Добавить onUrlUpdate?: string в интерфейс. Но это может загрязнить мой интерфейс. Что, если мне нужно передать 5 функций родительскому элементу?

Интерфейс

 export interface CourseSectionInterface {
    id?: string;
    title: string;
    lessons: LessonsInterface[],
}

Родительский

 <React.Fragment key={section.id}>
 <SubjectSections
  title={section.title}
  lessons={section.lessons}
  onUrlUpdate={changeVideo}
  />
</React.Fragment>

Дочерний

  const SubjectSections: React.FC<CourseSectionInterface> = ({title, lessons, onUrlUpdate}) => {
  const passUrl = (url: string) => {
    onUrlUpdate(url);
  }

  return (
   <h2 onClick={() => passUrl('url')}></h2>
  )
}

Комментарии:

1. Если вы не хотите изменять этот интерфейс, почему бы просто не создать новый интерфейс, содержащий CourseSectionInterface функцию a, и использовать ее вместо этого.

2. Возможно, но это противоречило бы принципу DRY. Я думаю, что просто обновить интерфейс было бы проще.

3. Это противоречило бы DRY только в том случае, если бы у вас были одинаковые свойства, включенные в оба интерфейса, если у вас есть интерфейс, содержащий другой интерфейс, типы не повторяются. interface A { a: string }; interface B { a: A, b: () => void }

4. Я думаю, вы правы.