0
Ich versuche, meine Webseite für eine bessere Leistung serverseitig zu rendern, aber es gibt ein Problem, bei dem die Komponenten meiner Seite componentDidMount() nicht aufgerufen werden.ComponentDidMount() im serverseitigen Rendern
Zum Beispiel, das ist meine Haupt-Template-Datei:
import React from 'react';
import Cube from './components/Cube/Cube.jsx';
class Index extends React.Component {
render() {
return (
<html>
<head>
<title>{this.props.title}</title>
</head>
<body>
<Cube />
</body>
</html>
);
}
}
Und mein Cube.jsx: "Hey"
import React from 'react';
class Cube extends React.Component {
componentDidMount() {
console.log("Hey!");
}
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}
export default Cube;
Ich bin nicht zu sehen, in meinen PM2-Logs oder in meiner Chrome-Konsole ausgeloggt zu werden, obwohl ich die <h1>Hello</h1> sehe, wenn die Seite geladen wird. Das hält mich davon ab, irgendeine Art von Logik für meine Komponente zu haben.
Wie kann ich dieses Problem umgehen und veranlassen, dass die componentDidMount() der Subkomponenten aufgerufen werden? Hinweis: Ich verwende express-react-views für mein serverseitiges Rendering.
Ich bin nicht sicher, ob Sie 'componentDidMount()' beim serverseitigen Rendern verwenden können. Ich erinnere mich an die Verwendung von Polyfills für Knoten, um es zu übersehen (?). – 82Tuskers
Ich denke, Server-Side-Rendering nur statische HTML-Markup generieren. Es enthält nicht Ihren Reaktionscode. Sie können also Ihr Protokoll nicht sehen. Sie müssen das Bundle zusammen mit dem Markup einfügen, das sich um diese Logik kümmert. –
@Prakashsharma meinst du die 'bundle.js' von webpack? – MarksCode