Frage Wie tippe ich eine React-Komponentendefinition ein?


Ich versuche, die Props einer React-Komponente statisch einzugeben. Nach der Einbeziehung der Definitionen für ReagierenIch habe eine typisierte Variation von definiert React.createClass genannt component.

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);
}

Wenn ich ein definiere Label Komponente mit einer Anmerkung, die besagt, dass es a text Fadenstütze,

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"}));
    }
});

Der Compiler überprüft dies Label heißt mit a text Eigenschaft und dass es eine Zeichenfolge ist.

Der nächste Schritt ist die Überprüfung des Compilers this.props.text Verwendet Innerhalb das Label Methoden. Wie es geht?


5
2017-08-10 22:08


Ursprung


Antworten:


Ich verwende das Reagieren-Typoskript bridge, die eine Basisklasse definiert, die in TypeScript verwendet werden kann:

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

Da die Basisklasse generisch ist, this.props ist richtig getippt als { name: string; } im obigen Beispiel.


4
2017-08-10 22:16



Im Wesentlichen möchten Sie Interfaces für Ihre Props und State erstellen und sie als den Typ der neuen Klasse weitergeben, die erweitert wird React.Component. Wenn Sie die React-Typdefinition verwenden, müssen Sie keine Typen für andere als die neuen Klassen hinzufügen, die Sie erstellen. Sie können dies im folgenden Muster sehen.

(Ich habe einen Blogeintrag darüber geschrieben Hier)

/// <reference path='../typings/react/react.d.ts' />
import React = require('react');

interface P {
  name?: string;
}

interface S {
  complete?: boolean;
}

class Goal extends React.Component<P, S> {
  state: S = {
    complete: false
  }

  private _toggleCompletion = () => {
    this.setState({complete: !this.state.complete});
  }

  render() {
    var status = 'Status: ' + (this.state.complete ? 'complete' : 'incomplete');
    return React.DOM.div({
      children: [
        React.DOM.div({}, this.props.name + ' - ' + status),
        React.DOM.button({
          onClick: this._toggleCompletion
        }, 'Toggle completion')
      ]
    });
  }
}

React.render(React.createElement(Goal, {name: 'Learn React and TypeScript'}), document.getElementById('react'));

1
2017-07-03 19:01