使用客户端和服务器端呈现来反应同构组件

Question

我想创建一个具有客户端和服务器端呈现的react应用程序。

这是一个例子：

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搜索了服务器端渲染示例的一些示例。 但是，没有客户端和服务器端呈现的教程。

我想要实现的是，客户端首先加载并呈现Component <Main /> ，然后从服务器端加载<Record /> 。

另一个问题是，如何使用renderToString加载样式模块Record.css，因为我认为在这个renderToString中只能加载html而不是css。

Answer 1

当人们提到服务器端渲染时，他们通常指的是某个路径上的顶级应用程序的初始渲染，而不是单个组件。

我无法理解您的用例是针对您的要求。 您的React应用程序是Fragments一个大树，因此渲染单个组件服务器端并不真正有意义。 如果你想让Record成为React的一部分，那么客户端需要了解它，那么为什么不按照惯例在客户端进行渲染呢？

如果你真的需要渲染它的服务器端，那么我猜你可以构建Record组件，以便它执行一个AJAX请求，然后返回的html可以使用https://facebook.github.io/react/tips/dangerously-呈现 - set-inner-html.html ，但我不推荐它。

我的猜测是， Record需要来自服务器端的某种数据，这就是为什么要在那里渲染它？ 而只是将该数据作为JSON获取并使用它来呈现组件客户端。

---

读完你的评论后，我知道你要做什么。 你想要的是从服务器动态加载内容（不是渲染的html）以响应某些事件（滚动，按钮点击或其他）。 React非常擅长这个。 通过更改应用程序的状态（即有什么记录），React将有效地处理重新渲染。

这是一个非常简单的应用程序。 它首先要有两个应该渲染的项目（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'));

Answer 2

使用css-modules-require-hook 。 它与babel-register类似，但是对于.css文件。 基本上，它会将您的require（'Record.css'）转换为您的hook配置上的javascript Object。 所以你的钩子配置应该与你的webpack css-loader配置相同。

将它放在服务器的入口文件中。

const hook = require('css-modules-require-hook');

hook({/* config */});