3

クライアント側とサーバー側の両方のレンダリングで反応アプリを作成したいと考えています。

次に例を示します。

import styles from './Main.css';

import React, {Component} from 'react';
import Info from './Info/Info';
import Record from './Record/Record'

export default class Main extends Component {
    render() {
        return (
            <div className={styles.main}>
                <div className={styles.mainIn + ' clearfix'}>
                    <div className={styles.mainLeft}>
                        <Info info_num="2012201972"/>
                    </div>
                    <div className={styles.mainRight}>
                        <div className="clearfix mb20">
                            <Record />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

このコンポーネントMainでは、クライアント側でレンダリングする必要があります。<Record />

成分Record

import styles from './Record.css';
import layout from '../../shared/styles/layout.css'

import React, {Component} from 'react';

export default class Record extends Component {
    render() {
        return (
            <div className="float_two">
                <div className={layout.box + ' mr10'}>
                    This is Record!
                </div>
            <div>
        )
    }
}

これが私の質問です：

と を使用して、サーバー側のレンダリングの例をいくつか検索しましReactDom.renderToStringたreact-router。ただし、クライアント側とサーバー側の両方のレンダリングに関するチュートリアルはありません。

私が達成したいのは、クライアントが最初にコンポーネント<Main />をロードしてレンダリングし、次に<Record />サーバー側からロードすることです。

別の質問は、スタイル モジュール Record.css を renderToString でロードする方法です。これは、この renderToString では css ではなく html のものをロードできると思うためです。

4

2 に答える 2

2

サーバー側のレンダリングについて言及する場合、通常、個々のコンポーネントではなく、特定のルートでの最上位アプリケーションの最初のレンダリングについて言及しています。

あなたのユースケースがあなたが要求したものであることを理解できません。React アプリケーションは の 1 つの大きなツリーでFragmentsあるため、単一のコンポーネントをサーバー側でレンダリングすることはあまり意味がありません。React の一部になりたい場合Record、クライアントはそれについて知る必要があるため、通常どおりクライアント側でレンダリングしてみませんか?

本当にサーバー側でレンダリングする必要がある場合は、Record コンポーネントを構築して AJAX リクエストを実行し、返された html をhttps://facebook.github.io/react/tips/dangerously-を使用してレンダリングできると思います。 set-inner-html.htmlですが、お勧めしません。

私の推測ではRecord、サーバー側からのある種のデータが必要であり、それがあなたがそこにレンダリングしたい理由ですか? 代わりに、そのデータを JSON として取得し、それを使用してコンポーネントのクライアント側をレンダリングします。

あなたのコメントを読んで、私はあなたが何をしようとしているのかを知っています。必要なのは、何らかのイベント (スクロールダウン、ボタンのクリックなど) に応答して、サーバーから (レンダリングされた html ではなく) コンテンツを動的にロードすることです。React はこの点で非常に優れています。アプリケーションの状態 (つまり、どのレコードがあるか) を変更することで、React は効率的に再レン​​ダリングを処理します。

これは非常に単純なアプリケーションです。レンダリングする必要がある 2 つのアイテム (foo と bar) を用意することから始めます。アクション (この場合はボタンのクリック) に応答して、より多くのデータが状態に読み込まれ、ページにレンダリングされます。これを変更するだけでsetTimeout、実際のデータを取得するためにバックエンドに AJAX 呼び出しを行う必要がなくなります。

ライブバージョンはこちら: https://codepen.io/dpwrussell/pen/qadrko

class Application extends React.Component {

  constructor(props) {
    super(props);

    // Start with 2 records
    this.state = {
      records: [
        {
          name: 'foo',
          description: 'Some foo'
        },
        {
          name: 'bar',
          description: 'Some bar'
        }
      ]
    };

    // Bind handlers
    this.loadMoreRecords = this.loadMoreRecords.bind(this);
  }

  // Method to call which gets more records on demand
  // Here I just use setTimeout and some static data, but in your case
  // this would be AJAX to get the data from your server where the callback
  // would do the setState. I use a 2 second delay to exaggerate a delay getting
  // the data from the server.
  loadMoreRecords() {
    setTimeout(() => {
      this.setState({
        records: this.state.records.concat([
          {
            name: 'hello',
            description: 'Some newly loaded hello'
          },
          {
            name: 'world',
            description: 'Some newly loaded world'
          }
        ])
      })
    }, 2000);
  }

  // Method to render whatever records are currently in the state
  renderRecords() {
    const { records } = this.state;
    return records.map(record => {
      return (
        <li>{ `${record.name} - ${record.description}` }</li>
      );
    })
  }

  // React's render method
  render() {
    return (
      <div>
        <h1>List of Records Page</h1>
        <ul>
          { this.renderRecords() }
        </ul>
        <input type='button' onClick={this.loadMoreRecords} value='Load more Records' />
      </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<Application />, document.getElementById('app'));
于 2016-09-07T15:58:10.333 に答える