问如何用道具和状态注释一个反应性功能组件？

EN

，这必须是因为类型记录无法知道子组件具有我要更新的状态。

不，这是因为元素没有公开的方法/函数的名称，有以下几个原因：

ref将引用DOM元素..

• ，但是即使它引用的是子组件实例，而该实例在其实现中可能具有setIsDataManipulated函数，但它不会以任何方式公开给父组件.

这不是TypeScript的问题(尽管TypeScript很早就指出了这一点)，方法/函数实际上并不存在于childComponentRef.current上。

如果希望父组件控制子组件中的状态，请不要将其子组件中的状态设置为子组件中的状态，而是将其子组件变为支柱。这就是道具:由它们提供给子组件的父组件控制的状态。如果子组件还必须告诉父组件需要更改，那么让父组件传递一个setter来使用它。

我在网上搜索，发现当我使用基于类的组件时，我可以传递第二个泛型类型，比如React.Component<TProps, TState>来注释道具和状态。但是如何使用React.FC来做到这一点呢？

不，React.FC (React.FunctionComponent)只有一个类型参数，用于道具。它没有理由为state设置一个类型参数，因为它不会用于任何事情。使用React.Component，状态类型参数确定组件的代码实例的state属性，以便在class组件中使用this.state和this.setState的代码可以被键入。但是，函数组件中的状态不是这样工作的。没有单一的状态对象。相反，在使用useState时，可以直接定义每个国家成员的类型。

下面是一个示例:一个带有一个支柱和两个状态项的class组件与一个具有相同的支柱和状态项的函数组件：

class ClassExample extends React.Component<{prop1: string}, {state1: number; state2: string | null}> {
    constructor(props: {prop1: string}) {
        super(props);
        this.state = {
            state1: 42,     // If these weren't here, TypeScript
            state2: null,   // would warn they were missing, thanks
                            // to the state type argument
        };
    }
    // ...
}

const FunctionExample: React.FC<{prop1: string}> = ({prop1}) => {
    const [state1, setB] = useState(42); // TypeScript infers `number` for type
    const [state2, setC] = useState<string | null>(null); // Explicit so TypeScript knows it's `string | null`

    // ...
};