Javascript Typescript React componentDidMount未被调用

我试图使用typescript/react运行一些示例，但由于某些原因，componentDidMount函数没有被触发，我想将我的AJAX逻辑移到其中

下面是我的代码

var app = new MyAppApplication();

namespace MyAppApp.Components {
    // props?: P, context?: any
    export class HomePageView extends React.Component<any, any> {
        constructor(props, context) {
            super(props, context);
            this.state = null;
            // calling here
            console.log("constructor");
        }
        public componentDidMount() {
        // not calling here
            console.log("componentDidMount");
        }
        public render() {
            var view = this.state.map((item, index) =>
                <div className="MyAppBoxContainer" key={index}>
                    <a href={item.Href}>{item.Title}</a>
                    </div>
            );
            return (<div>{view}</div>);
        }

    }
}


app.getHomeContentTitles().then(result => {
    //app.logger.info(this, result);
    var main = new MyAppApp.Components.HomePageView("1", result);
    main.state = result;
    var mainView = main.render();
    ReactDOM.render(mainView, document.getElementById(app.templateContainer));
}).catch(err => {
    app.logger.error(this, err);
});

var-app=new MyAppApplication（）；
名称空间MyAppApp.Components{
//道具？：P，背景？：任何
导出类HomePageView扩展React.Component
);
返回（{view}）；
}
}
}
app.getHomeContentTitles（）。然后（结果=>{
//app.logger.info（此，结果）；
var main=新的MyAppApp.Components.HomePageView（“1”，结果）；
main.state=结果；
var mainView=main.render（）；
render（mainView，document.getElementById（app.templateContainer））；
}).catch（错误=>{
app.logger.error（这个，err）；
});

---

我遗漏了什么吗？

不要自己调用组件的

render（）

方法。另外，不要自己实例化它。此外，将道具传递到组件中，而不是直接设置状态：

更改此项：

var main = new MyAppApp.Components.HomePageView("1", result);
main.state = result;
var mainView = main.render();
ReactDOM.render(mainView, document.getElementById(app.templateContainer));

为此：

ReactDOM.render(
    <MyAppApp.Components.HomePageView result={result} />,
    document.getElementById(app.templateContainer)
);

然后通过

this.props.result

而不是

this.state

访问结果：

public render() {
    return (
        <div>
            {this.props.result.map((item, index) =>
                <div className="MyAppBoxContainer" key={index}>
                    <a href={item.Href}>{item.Title}</a>
                </div>
            )}
        </div>
    );
}

public render（）{
返回(
{this.props.result.map（（项，索引）=>
)}
);
}

tsx文件支持JSX，您的建议非常有效，谢谢！

public render() {
    return (
        <div>
            {this.props.result.map((item, index) =>
                <div className="MyAppBoxContainer" key={index}>
                    <a href={item.Href}>{item.Title}</a>
                </div>
            )}
        </div>
    );
}