0

次の課題へのいくつかの指針を期待しています。

  • PugJS ビューを作成しました --> このビューは EpxressJS ルート内でレンダリングされます --> ExpressJS 関数 res.render の呼び出しで、React コンポーネントは ExpressJS .render() 関数呼び出し内のデータとして含まれます.... .

! 問題は、React コンポーネントが正しくレンダリングされず、HTML 要素としてマウントされていないことです。単一の「div」と最初の「a」タグのみを取得します。! バンドルに webpack を使用しています... PugJS ビューの「script」タグに含まれる bundle.js ファイルが生成されます。! 「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 にマウントされていないのはなぜですか?

あなたから聞いて楽しみにして。

どうもありがとうございました:-)

4

1 に答える 1