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 />从服务器端加载。

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

4

2 回答 2

2

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

我无法理解您的用例是否符合您的要求。您的 React 应用程序是一棵大树Fragments，因此在服务器端渲染单个组件并没有真正意义。如果你想Record成为 React 的一部分，那么客户端需要知道它，那么为什么不像往常一样在客户端渲染它呢？

如果你真的需要在服务器端呈现它，那么我想你可以构建 Record 组件以便它执行 AJAX 请求，然后可以使用https://facebook.github.io/react/tips/dangerously呈现返回的 html 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 回答
-1

使用css-modules-require-hook。它类似于 babel-register 但用于 .css 文件。基本上，它将你的 require('Record.css') 转换为基于你的钩子配置的 javascript 对象。所以你的钩子配置应该和你的 webpack css-loader 配置一样。

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

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

hook({/* config */});
于 2016-09-01T04:15:52.887 回答