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

时间:2017-10-31 09:48:40

标签: reactjs typescript asp.net-core

问题与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&amp; IntrinsicClassAttributes&amp; Readonly&lt; {children?:ReactNode; }&GT; &安培; ......“。     类型'{}'不能分配给'Readonly&lt; {Hello:(name:string)=&gt;无效; }&GT;”

     

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

如何解决此问题?

1 个答案:

答案 0 :(得分: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是否 truthy ,类型从(name: string) => void | undefined缩小到(name: string) => void,因此您可以调用该函数。