在调用 Express res.render 时，React 组件未完全呈现到 PugJS 视图中

Question

我希望得到一些关于以下挑战的指示：

我创建了一个 PugJS 视图 --> 这个视图在 EpxressJS 路由中呈现 --> 在对 ExpressJS 函数的调用中 res.render React 组件作为数据包含在 ExpressJS .render( ) 函数调用.....

！问题是 React 组件没有被正确渲染并挂载为 HTML 元素。我只得到一个 'div' 和第一个 'a' 标签。！我正在使用 webpack 进行捆绑...导致 bundle.js 文件包含在我的 PugJS 视图中的 'script' 标记中。！注意 '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 上？

期待您的来信。

非常感谢:-)

Answer 1

我制作了您所说的这个小组件。这里的问题是，如果你想让它显示，在你的 App 组件中设置 show: true 。或者，您可以在客户端包含 js，当您单击它时将触发它打开。除非打开，否则 react-simple-model 什么也不渲染。

在调用 Express res.render 时，React 组件未完全呈现到 PugJS 视图中

React component not being rendered entirely into PugJS view upon calling Express res.render

express

reactjs

typescript

webpack

pugjs

---- 科技。信息----