reactjs - Předat funkci jako vlastnost dětské funkční komponentě

Snažím se předat zpětnou volací funkci dítěti, které je funkční komponentou, aby mohlo aktualizovat rodiče. Vevnitř dítěte dostávám chybu Uncaught TypeError: updateVal is not a function (přidám komentář k řádku, kde k tomu dochází). Máte nějaké nápady, co dělám špatně?

export default class Parent extends React.Component {
  constructor(props: any) {
    super(props);

    this.updateVal = this.updateVal.bind(this);

    this.state = {
      val: 'A',
    };
  }
  
  updateVal(newVal: string) {
    this.setState({ val: newVal });
  }

  render() {
    return (
      <Child 
        updateVal={this.updateVal}
      />
    );
  };
}

export function Child(updateVal: any) {
  
  const handleSelectorChange = (event: any) => {
    updateVal(event.target.value); // error here: updateVal is not a function
  };

  return (
      <Select onChange={handleSelectorChange} >
        <option value="A">A</option>
        <option value="B">B</option>
      </Select>
  );
};

Odpověď č. 1

Props jsou předávány funkčním komponentám jako objekt, nikoli jako jednotlivé argumenty. Stručně řečeno, při daném JSX:

<Child
  foo={fooValue}
  bar={barValue}
/>

můžete očekávat, že dítě obdrží objekt, který v jeho props drží { foo: fooValue, bar: barValue }.

Prvním argumentem vaší funkční komponenty je ten objekt. Požadovanou hodnotu z něj můžete získat přímo:

export function Child(props) {
  const updateVal = props.updateVal;
  // ...
}

nebo jeho zničením:

export function Child({ updateVal }) {
  // ...
}

Odpověď č. 2

Problém je v Child(updateVal: any). Je potřeba to aktualizovat na: Child({updateVal}: any)