Question

我希望能够指出以下挑战：

我创建了一个PugJS视图 - ＆gt;此视图在EpxressJS路由中呈现 - ＆gt;在调用ExpressJS函数res.render时，React组件作为数据包含在ExpressJS .render（）函数调用中.....

！问题是React组件没有正确呈现并挂载为HTML元素。我只得到一个单一的＆＃39; div＆＃39;而第一个＆＃39; a＆＃39;标签。！我正在使用webpack进行捆绑...导致一个包含在＆＃39;脚本中的bundle.js文件＆＃39;在我的PugJS视图中标记。！注意使用＆＃39; simple-react-modal＆＃39;

这是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'));
}

- ＆GT;第一个＆＃39; a＆＃39;中的onClick占位符中没有任何内容。生成的HTML代码中的标记。 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"
},*/

};

---- TECH。信息----

在开发中使用TypeScript
使用JSX
服务器在NodeJS上运行
webpack用于捆绑所有。
使用服务器端渲染。

===============

我错过了什么？为什么不是整个React＆＃39; Modal＆＃39;对象包含并挂载到生成的HTML？

期待收到你的来信。

非常感谢你： - ）

Answer 1

我制作了你正在谈论的这个小组件。这里的问题是，如果您希望它显示，请在您的App组件中设置show: true。或者，您可以在客户端上包含js，当您单击它时将触发它打开。 react-simple-model除非它是开放的，否则什么都不呈现。

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

---- TECH。信息----

1 个答案: