typescript – 如何输入React组件定义？

发布时间：2020-12-15 20:12:01 所属栏目：百科来源：网络整理

导读：我试图静态地键入React组件的道具.在包含 definitions for React之后,我定义了一个名为component的React.createClass的类型变体. interface ComponentP { (props: P,...children: any[]): React.ReactComponentP,any}function componentP,S(spec: React.Reac

我试图静态地键入React组件的道具.在包含 definitions for React之后,我定义了一个名为component的React.createClass的类型变体.

interface Component<P> {
    (props: P,...children: any[]): React.ReactComponent<P,any>
}

function component<P,S>(spec: React.ReactComponentSpec<P,S>): Component<P> {
    return React.createClass(spec);
}

当我使用注释定义带有文本字符串prop的注释时,

var Label: Component<{text: string}> = component({
    render: function() {
        return React.DOM.div(null,this.props.text);
    }
});

var App = React.createClass({
    render: function() {
        return React.DOM.div(null,Label({text: "Hello"}));
    }
});

编译器检查Label是否使用text属性调用,并且它是一个字符串.

下一步是让编译器检查this.props.text在Label方法中使用.怎么做？

解决方法

我使用 react-typescript桥,它定义了一个可以从TypeScript使用的基类：

class HelloMessage extends ReactTypescript.ReactComponentBase<{ name: string; },{}> {
  render() {
    return React.DOM.div(null,'Hello ' + this.props.name);
  }
}

由于基类是通用的,因此this.props正确输入为{name：string;在上面的例子中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!