react hook 父子通信

父组件

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [text, setText] = useState<string>('');

  // 用于更新text值的函数
  const handleTextChange = (newText: string) => {
    setText(newText);
  };

  return (
    <div>
      <ChildComponent onTextChange={handleTextChange} />
      <p>Text from child component: {text}</p>
    </div>
  );
}

export default ParentComponent;

子组件

import React, { useState } from 'react';

interface Props {
  onTextChange: (text: string) => void;
}

function ChildComponent(props: Props) {
  const [text, setText] = useState<string>('');

  // 用于更新text值的函数
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newText = event.target.value;
    setText(newText);

    // 调用父组件传入的回调函数，并将新的文本值作为参数传递
    props.onTextChange(newText);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );
}

export default ChildComponent;

添加了类型注释来定义props和回调函数的参数类型。在父组件中,使用useState钩子来定义text状态，并指定其类型为string。在子组件中，使用interface来定义props类型，并使用React.ChangeEvent来定义handleChange函数的参数类型。