代码之家 › 专栏 › 技术社区 › Teoman shipahi

未调用Typescript React组件DidMount

typescript reactjs javascript

Teoman shipahi · 技术社区 · 9 年前

我正在尝试用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);
});

我错过了什么吗?

1 回复 | 直到 9 年前

rossipedia 9 年前

不要调用组件的 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)
);

如果不支持JSX,则可以执行以下操作:

ReactDOM.render(
    React.createElement(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>
    );
}

推荐文章

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Zoddo · 属性在明确定义时可能为“未定义”

4 月前

Abdulkerim Awad · 带有泛型的Typescript函数重载无法按预期工作

4 月前

Sanitysign · 为什么{}类型可分配给对象类型?

4 月前

IvonaK · 使用Vite和React在Tauri应用程序中集成shadcn/ui和Tailwind CSS v4

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

Xunnamius · 为什么TypeScript在有条件地推断数组末尾的可选元素时遇到困难?

5 月前

njord · 基于函数的Typescript返回类型

5 月前