Вопрос для ученика: почему при кодировании Typescript / React необходимо использовать отдельный файл реквизита?

Question

Я переучиваю (!) TypeScript и в меньшей степени реагирую после первоначального изучения вещей простым способом.

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

Я создаю приложение, которое выглядит следующим образом:

import * as React from 'react';
import styles from './Dibf.module.scss';
import { HashRouter as Router, Route } from 'react-router-dom';
import { Page1 } from './Page1/Page1';
import { Page2 } from './Page2/Page2';
import { Header } from './Header/Header';
import { Footer } from './Footer/Footer';
import { Product } from './Product/Product';

import { IDibfProps } from './IDibfProps';
import { escape } from '@microsoft/sp-lodash-subset';

export default class Dibf extends React.Component<IDibfProps, {}> {
  constructor(props) {
    super(props);
    this.state = {
      CurrentUserTitle: null,
      CurrentUser: null,
      CurrentUserGroups: null,
      CurrentUserID: null,
      CurrentUserEmail: null,
      FullName: null,
      UniId: null,
      FilteredItems: [],
      Author: null,
      CurrentUserRole: null,
      Items: [],
      DepartmentsList: [],
      SelectedDept: undefined,
      Id: null,
      JobRef: null,
      Title: null,
      JobTitle: null,
      DateOfBreach: null,
      DateOfDiscovery: null,
      IncidentDetails: null,
      PersonalData: null,
      FormStatus: null,     
      PhoneNo: null,
      Department: null,
      SubDepartment: null,
      LoggedInUser: null,
      LoggedInUserPPDefaultItems: [],
    };
  }
  public render(): React.ReactElement<IDibfProps> {
    return (
      <Router>
        <div>
          <h2>App</h2>

          <Header HOW WOULD I GET THIS CHILD FUNCTION TO UPDATE THE STATE OF ITS THIS PARENT?/>

          {/* The different screens will be re-rendered here */}

          <Route path="/screen1" component={Page1} />
          <Route path="/screen2" component={Page2} />
          <Route path="/products/:id" component={Product} />

          <Footer />
        </div>
      </Router>
    );
  }
}

Так что вы можете увидеть различныедочерние компоненты. , и т.д ...

У меня будут поля пользовательского интерфейса и элементы управления для каждого из этих дочерних компонентов. Что проще всего сделать:

1. Иметь состояние для ВСЕХ элементов управления в Parent, как я описал выше, а затем использовать файл props и интерфейсный файл состояния, чтобы каким-то образом передать то, что изменилось вконтролирует до состояния (поднятие состояния с помощью функции-обработчика?)

2. Или для каждого дочернего компонента установлено состояние и передаются реквизиты между братьями и сестрами? Как будет работать отдельный файл интерфейса props / state в этом случае?

Я понимаю, как передать props / состояние с помощью React, но я не понимаю, как TypeScript делает это с помощью интерфейсов. Я предполагаю, что это как-то связано с объявлением класса и рендера, но я не уверен.

Мне нужна помощь этого сообщества здесь, так как сейчас я немного разбираюсь в этом. Представьте себе, что вы изучаете что-то в течение нескольких месяцев, а потом узнаете, что вы НИЧЕГО не знаете!

Может кто-нибудь дать мне простое объяснение с примерами кода вместо ссылок.

Спасибо

ОБНОВЛЕНИЕ: Я обновил код - пожалуйста, посмотрите на функцию Header с запросом. Пожалуйста, предоставьте пример кода (ов).

T

Answer 1

Важно отметить, что Typescript напечатан на утке. Эти два интерфейса эквивалентны

interface PorpsOne{     
  caption:string     
} 

interface PropsTwo{     
  caption:string     
} 

С учетом этих интерфейсов следующая конструкция в порядке.

function userOne(item:PropsOne){return item.caption;} 
function userTwo(item:PropsTwo){return item.caption;} 


const item = {caption:"Item caption", other:42, properties:null}; 
userOne(item); 
userTwo(item); 

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

Typescript не делает ничего для передачи состояний между родительским потомком, javascript во время выполнения делает. Typescript помогает вам гарантировать, что требуемая информация будет передана, набрав и проверив эти типы

INHO, это хорошее направление, чтобы попытаться извлечь общее состояние и поместить его в родительский и использовать (1) функции-обработчики для его обновления.

Поэтому

КАК Я ПОЛУЧИЛ ЭТУ ФУНКЦИЮ РЕБЕНКА, ЧТОБЫ ОБНОВИТЬ СОСТОЯНИЕ ЕГО РОДИТЕЛЯ?

interface HeaderCanChangeCurrentUser{
  onCurrentUserTitle(title: string): void;
}
//...can be a field of parent class instead of const in render
const onCurrentUserTitle:HeaderCanChangeCurrentUser["onCurrentUserTitle"] = (value:string)=>{this.setState({CurrentUserTitle:value});};
<Header onCurrentUserTitle={onCurrentUserTitle}/>

Машинопись помогает вам сформулировать, какойчасть состояния, от которого зависит компонент.

НО снова. Не обязательно помещать объявление интерфейса в отдельный файл. Объявление также может быть экспортировано из файла компонента. И все же отдельные вещи как бы помогают удобочитаемости или нет? В конце концов, это личные и командные предпочтения.

Я также могу интерпретировать вопрос по-другому. Поможет ли машинопись мне объявить реквизиты для дочернего компонента, чтобы обновить родительское состояние. То есть, если у меня есть интерфейс, полный полей, он создаст «производный / зависимый» интерфейс, полный методов onXxx для изменения родительского состояния. Да.

Но опять же не могу связать эту интерпретацию с частью «отдельные файлы».