![](/img/trans.png)
[英]React abstract component (ES6) that renders an array of components. How to create a d.ts file for it?
[英]Refreshing Page that Renders React Component with ES6 Constructor Breaks App
按照本教程 ,我将使用React-Router和Alt在ES6中构建一个React Web应用程序。 我的所有组件均可正确渲染,但是具有构造函数的组件在刷新浏览器页面时会中断。 这是错误。
TypeError: undefined is not a function
at new Track (/Users/juancarlosfarah/Git/maestro/src/components/Track.js:14:17)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:135:16)
at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactMultiChild.js:192:44)
at ReactDOMComponent.Mixin._createContentMarkup (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactDOMComponent.js:289:32)
at ReactDOMComponent.Mixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactDOMComponent.js:199:12)
at Object.ReactReconciler.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactReconciler.js:38:35)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactCompositeComponent.js:247:34)
at [object Object].wrapper [as mountComponent] (/Users/juancarlosfarah/Git/maestro/node_modules/react/lib/ReactPerf.js:70:21)
在Track.js的第14行,定义了构造函数:
class Track extends React.Component {
constructor(props) {
super(props);
console.debug("Constructing Track...");
this.state = TrackStore.getState();
this.handleTextChange = this.handleTextChange.bind(this);
this.handleSaveClick = this.handleSaveClick.bind(this);
this.handleUndoClick = this.handleUndoClick.bind(this);
this.renderButtons = this.renderButtons.bind(this);
this.onChange = this.onChange.bind(this);
}
...
}
在app.js中,我将路由呈现如下:
Router.run(routes, Router.HistoryLocation, function(Handler) {
React.render(<Handler />, document.getElementById('app'));
});
它们在routes.js中定义:
export default (
<Route handler={App}>
<Route path='/' handler={Home} />
<Route path="/tracks/" handler={Tracks} />
<Route path="/track/:id" handler={Track} />
</Route>
);
在server.js中,页面使用Swig呈现。
app.use(function(req, res) {
Router.run(routes, req.path, function(Handler) {
let html = React.renderToString(React.createElement(Handler));
let page = swig.renderFile('views/index.html', { html: html });
res.send(page);
});
});
即使删除了constructor
中的所有代码并仅保留console.log
语句,刷新浏览器时也会收到错误消息。 如果没有构造函数,则刷新后页面呈现良好。
很长一段时间后,我发现了自己遇到的问题。 在Track.js
我包含了一行代码来帮助我调试错误,它称为console.debug()
(我现在已将其显式添加到问题代码中,但最初并未显示)。 当客户端渲染Track.js
时,这不是问题,因为Chrome中的控制台可以运行console.debug()
。 但是,当直接访问URL时,该页面将由不支持console.debug()
的服务器呈现。 因此,应用程序将中断,并显示神秘错误。 删除该行或将其更改为console.log()
此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.