Question

我有一个基类，我的所有组件都有一个初始化函数，我不想在所有组件中重复。这是一个单独的包，我从另一个项目链接。

import React = require('react/addons');
abstract class BaseAppComponent<P, S> extends React.Component<P, S> {
    constructor(props?: P, context?: any) {
       super(props, context);
    }
    protected _initialize() {
        ...
    }
}
export = BaseAppComponent;

我的应用就像这样使用它

import React = require('react/addons');
import MyLib = require('mylib');
class MyApp extends MyLib.BaseAppComponent<AppProps, AppState> {
   constructor(props: AppProps, context: any) {
    super(props, context);
   },
   componentWillMount() {
     this._initialize();
   },
   render() {
      return (<MyAppComponents />);
   }
}

export = MyApp;

我现在的问题是我有一个更高阶的构图，我想包装MyApp，但我似乎无法弄清楚如何去做。

我试过了。该文件位于MyLib项目中。

import React = require('react/addons');
function wrapInAppContainer(AppComponent: any) {
    return (props: any) => {
        return (
            <MyWrapper>
                <AppComponent {...props} />
            </MyWrapper>
        );
    };
}
export = wrapInAppContainer;

所以在MyApp里面，我最后加了而不是export = MyApp，我做了

export = MyLib.wrapInAppContainer(MyApp);

在我的app.js文件中，我渲染应用程序

import React = require('react');
import MyApp = require('./components/<MyApp');

React.render(<MyApp />, document.getElementById('myapp'));

但是当我运行它时，我得到“无法添加属性上下文，对象不可扩展”的错误。

我做错了什么？

使用打字稿反应更高阶的成分

0 个答案: