使用 Typescript 的 React 组件中的默认函数值

Posted 2023-02-22

【中文标题】使用 Typescript 的 React 组件中的默认函数值

【英文标题】：Default function value in React component using Typescript

【发布时间】：2018-04-12 10:31:22

【问题描述】：

这个问题与this 非常相似，但我的重点是默认功能。 （我是前端新手，如果有更正式的名字请告诉我）

这是代码（我使用的是 TypeScript 2.5）：

export const TestProps = 
    Hello: (name: string) => 
        console.log(name);
    


type TestPropsType = typeof TestProps;

export class TestComp extends React.Component<TestPropsType, >    
    public render() 
        this.props.Hello("world");
        return <div>test</div>;
    

然后，当我尝试渲染这个组件时：

ReactDOM.render(<TestComp />, document.getElementById("page"));

我收到了这个错误；

TS2322：类型“”不可分配给类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly & ...'。 类型 '' 不可分配给类型 'Readonly void; >'。

类型“”中缺少属性“Hello”。

我该如何解决这个问题？

【参考方案1】：

首先，让我们修复您的示例：

interface TestProps 
    Hello?:  (name: string): void ;


export class TestComp extends React.Component<TestProps, >     
    public static defaultProps: Partial<TestProps> = 
        Hello: name => console.log(name)
    ;

    public render() 
        this.props.Hello("world");
        return <div>test</div>;
    

您之前编写它的方式意味着您的组件看不到TestProps（它不是从任何地方传入的）并且Hello 是必需的道具。我使用Hello? 的接口使其成为可选，而不是使用typeof。

编译器错误来自Hello是必需的，所以你需要使用：

ReactDOM.render(<TestComp Hello=() =>  />, document.getElementById("page"));
                       // ^ pass Hello as a prop here

这样做可以修复编译错误，但您仍然会遇到不正确的行为，因为您示例中的对象 TestProps 永远不会被使用。

如果您使用的是strictNullChecks，那么您将不得不稍微调整一下类型系统，因为Hello 是一个可选属性：

if (this.props.Hello) this.props.Hello("world");
// or
this.props.Hello && this.props.Hello("world");

通过检查this.props.Hello是否为真实，类型从(name: string) => void | undefined缩小到仅(name: string) => void，因此您可以调用该函数。

【讨论】：

谢谢汤姆，我刚刚尝试了你的解决方案，但是......现在还有另一个错误（“this.props.Hello”下有一条红线）：TS2532：对象可能是“未定义”。