TypeScript 1.8 - 为什么我的 React Stateless Function 组件会在运行时抛出 TypeError？

Question

我正在尝试创建 React Stateless Function component as described in the TypeScript 1.8 release notes。这编译没有错误，但在运行时抛出 TypeError。为什么？

我有接口

interface AppError {
  id: string;
  message: string;
}

我的组件如下所示：从 "react";

导入 * 作为 React

import { AppError } from "../error.interface";

const ErrorMessage = (props: {key: string, error: AppError}) => (
  <div className="col-lg-12" id={this.props.error.id}>
    <h2 className="page-header"><small>{this.props.error.message}</small>  </h2>
  </div>
);

export default ErrorMessage;

它是从这样的另一个组件使用的：

import * as React from "react";

import * as ErrorModel from "./../error.model";
import { AppError } from "./../error.interface";

import ErrorMessage from "./error.message.tsx";


export default class ErrorContainer extends React.Component<{}, ErrorContainerState> {

    constructor(props) {
        super(props);
      this.state = this._buildState();
    }

    componentDidMount() { ErrorModel.observable.addListener(this._onModelUpdate.bind(this)); }
    componentWillUnmount() { ErrorModel.observable.removeListener(this._onModelUpdate.bind(this)); }

    render() {
        let divStyle = {
            marginTop: "15px"
        };

        return (
           <div className="row" id="errors" style={divStyle}>
                {this.state.errors.map((e) => <ErrorMessage key={e.id} error={e} />)}
           </div>
            );
    }

    _onModelUpdate() {
        this.setState(this._buildState());
    }

    _buildState() {
        return {
            errors: ErrorModel.getErrors()
        };
    }
}

interface ErrorContainerState {
    errors: AppError[];
}

编译没有错误。但是，在运行时我收到错误：Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(…)。错误指向我的无状态函数中的行： <div className="col-lg-12" id={this.props.error.id}>

完整的堆栈跟踪如下。

作为普通组件，这一切都工作得很好。

版本信息：Typescript 1.8.7，react 0.14.7

我的 react.d.ts 是通过 typings 安装的，它似乎是最新的。

完整的 TypeError 堆栈跟踪：

Uncaught (in promise) TypeError: Cannot read property 'error' of undefined(…)ErrorMessage @
error.message.tsx:6ReactCompositeComponentMixin.mountComponent @
ReactCompositeComponent.js:148wrapper @ ReactPerf.js:66ReactReconciler.mountComponent @ ReactReconciler.js:37ReactMultiChild.Mixin._mountChildByNameAtIndex @ ReactMultiChild.js:474ReactMultiChild.Mixin._updateChildren @ ReactMultiChild.js:378ReactMultiChild.Mixin.updateChildren @ ReactMultiChild.js:326ReactDOMComponent.Mixin._updateDOMChildren @ ReactDOMComponent.js:871ReactDOMComponent.Mixin.updateComponent @ ReactDOMComponent.js:700ReactDOMComponent.Mixin.receiveComponent @ ReactDOMComponent.js:645ReactReconciler.receiveComponent @ ReactReconciler.js:87ReactCompositeComponentMixin._updateRenderedComponent @ ReactCompositeComponent.js:562ReactCompositeComponentMixin._performComponentUpdate @ ReactCompositeComponent.js:544ReactCompositeComponentMixin.updateComponent @ ReactCompositeComponent.js:473wrapper @ ReactPerf.js:66ReactCompositeComponentMixin.performUpdateIfNecessary @ ReactCompositeComponent.js:421ReactReconciler.performUpdateIfNecessary @ ReactReconciler.js:102runBatchedUpdates @ ReactUpdates.js:129Mixin.perform @ Transaction.js:136Mixin.perform @ Transaction.js:136assign.perform @ ReactUpdates.js:86flushBatchedUpdates @ ReactUpdates.js:147wrapper @ ReactPerf.js:66Mixin.closeAll @ Transaction.js:202Mixin.perform @ Transaction.js:149ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:62enqueueUpdate @ ReactUpdates.js:176enqueueUpdate @ ReactUpdateQueue.js:24ReactUpdateQueue.enqueueSetState @ ReactUpdateQueue.js:190ReactComponent.setState @ ReactComponent.js:65ErrorContainer._onModelUpdate @ error.container.tsx:32(anonymous function) @ observable-factory.ts:21arrayEach @ lodash.js:483forEach @ lodash.js:7827notifyAll @ observable-factory.ts:21setErrors @ error.model.ts:38report @ error.model.ts:15report @ error.service.ts:5_handleError @ session.service.ts:34

Answer 1

无状态组件没有this。

更改此行： <h2 className="page-header"><small>{this.props.error.message}</small> </h2>

至

<h2 className="page-header"><small>{props.error.message}</small> </h2>

Answer 2

Björn 的回答是正确的（无状态组件没有 this），为了清楚起见，将更正后的无状态组件代码放在这里：

import { AppError } from "../error.interface";

const ErrorMessage = (props: {key: string, error: AppError}) => (
  <div className="col-lg-12" id={props.error.id}>
    <h2 className="page-header"><small>{props.error.message}</small>  </h2>
  </div>
);

export default ErrorMessage;

TypeScript 1.8 - 为什么我的 React Stateless Function 组件会在运行时抛出 TypeError？

TypeScript 1.8 - Why does my React Stateless Function component throw a TypeError at runtime?

typescript

reactjs

tsx