admin管理员组文章数量:1323737
I am trying to run some sample with typescript/react, but for some reason ponentDidMount function is not getting fired, and I would like to move my AJAX logic in there.
Here is my code below.
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 ponentDidMount() {
// not calling here
console.log("ponentDidMount");
}
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);
});
Am I missing something?
I am trying to run some sample with typescript/react, but for some reason ponentDidMount function is not getting fired, and I would like to move my AJAX logic in there.
Here is my code below.
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 ponentDidMount() {
// not calling here
console.log("ponentDidMount");
}
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);
});
Am I missing something?
Share Improve this question asked Jan 23, 2016 at 5:58 Teoman shipahiTeoman shipahi 23.1k16 gold badges144 silver badges173 bronze badges1 Answer
Reset to default 5Don't call your ponent's render()
method yourself. Also, don't instantiate it yourself. Also, pass props in to your ponent, rather than setting state directly:
Change this:
var main = new MyAppApp.Components.HomePageView("1", result);
main.state = result;
var mainView = main.render();
ReactDOM.render(mainView, document.getElementById(app.templateContainer));
To this:
ReactDOM.render(
<MyAppApp.Components.HomePageView result={result} />,
document.getElementById(app.templateContainer)
);
If JSX is not supported, then you can do:
ReactDOM.render(
React.createElement(MyAppApp.Components.HomePageView, { result: result}),
document.getElementById(app.templateContainer)
);
Then access results via this.props.result
rather than 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>
);
}
本文标签: javascriptTypescript React componentDidMount not getting calledStack Overflow
版权声明:本文标题:javascript - Typescript React componentDidMount not getting called - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742119686a2421637.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论