我希望对以下挑战有一些指导：
- 我创建了一个 PugJS 视图 --> 这个视图在 EpxressJS 路由中呈现 --> 在对 ExpressJS 函数 res.render 的调用中，React 组件作为数据包含在 ExpressJS .render() 函数调用中...... .
！问题是 React 组件没有正确呈现并作为 HTML 元素安装。我只得到一个“div”和第一个“a”标签。！我正在使用 webpack 进行捆绑...产生一个 bundle.js 文件，该文件包含在我的 PugJS 视图中的“脚本”标签中。！注意“simple-react-modal”的使用
这是 React 组件：
let isNode = typeof module !== 'undefined' && module.exports;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Modal, {closeStyle} from 'simple-react-modal';
let appClass = class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.show = this.show.bind(this);
}
show(){
this.setState({show: true});
}
close(){
this.setState({show: false});
}
render() {
return (
<div>
<a onClick={this.show}>Open Modal</a>
<Modal
className="test-class" //this will completely overwrite the **strong text**default css completely
style={{background: 'red'}} //overwrites the default background
containerStyle={{background: 'blue'}} //changes styling on the inner content area
containerClassName="test"
closeOnOuterClick={true}
show={this.state.show}
onClose={this.close.bind(this)}>
<a style={closeStyle} onClick={this.close.bind(this)}>X</a>
<div>hey</div>
</Modal>
</div>
);
}
}
if (isNode) {
exports.App = appClass;
} else {
console.log("hi from here");
ReactDOM.render(new appClass({}), document.getElementById('react-root'));
}
--> 结果 HTML 代码中第一个 'a' 标记的 onClick 占位符中没有任何内容。onClick 根本不存在。也没有事件监听器。
ExpressJS 路由的渲染部分如下所示：
// Prep react modal....
let modalApp = React.createFactory(App.App);
let react = renderToString(modalApp({}));
expressRes.render('entry', {
title: 'Somthing',
message: 'Somthing',
myName: name,
email: expressReq.email,
react: react
结果如下所示：
我的 webpack 配置文件：
module.exports = {
entry: "./app/components/modal.tsx",
output: {
filename: "./app/components/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
{ test: /\.tsx?$/, loader: "ts-loader" }
//{ test: /\.jsx?$/, loader: "jsx" }
],
preLoaders: [
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader" }
]
}
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
/*externals: {
"react": "React",
"react-dom": "ReactDOM"
},*/
};
---- 技术。信息----
- 使用正在开发的 TypeScript
- 使用 JSX
- 服务器在 NodeJS 上运行
- webpack 用于捆绑所有内容。
- 所以使用服务器端渲染。
================
我错过了什么？为什么不包含整个 React 'Modal' 对象并将其安装到生成的 HTML 中？
期待着听到您的意见。
非常感谢你 ：-）