让SSR使用

Question

基本上，我们有一个模块，用于读取服务器端呈现的客户端数据，并将数据与找到的数据一起提供给renderToString (客户机使用window.__SOME_DATA__呈现，但我不希望在快速路由上使用全局数据)。

以下是我们所处的位置：

const contentService = new ServerService();
const app = (
  <StaticRouter context={context} location={req.url}>
    <App/>
  </StaticRouter>
);

try {
  await contentService.getSomeData(app);
} catch (error) {
  console.log('THERE WAS A MARKUP ERROR', error);
}

const markup = renderToString(
  contentService.withProvider(
    app
  )
);

服务器服务如下所示：

export class ServerService {
  items = {};

  getSomeData = async (app) => {
    // gets some server side data and saves it to the `items` object
  };

  withProvider = (app) => {
    const providedApp = (
      <ServerProvider data={this.items}>
        { app }
      </ServerProvider>
    );

    console.log('ITEMS provided', { data: this.items });

    return providedApp;
  };

  getScriptData() {
    return `
      <script>
          window. __SOME_DATA__ = ${JSON.stringify(this.items)};
      </script>
    `;
  }
}

最后但并非最不重要的是我的提供者：

import * as React from 'react';

const ServerContext = React.createContext(null);

export class ServerProvider extends React.Component {
  render () {
    console.log('Providing data', { props: this.props });

    return (
      <ServerContext.Provider value={{ ...this.props.data }}>
        {this.props.children}
      </ServerContext.Provider>
    );
  }
}
export const ServerConsumer = ServerContext.Consumer;

问题是，它似乎很好地设置了withProvider函数中的数据，但是当我使用ServerConsumer组件时，它似乎包含nothing --但是它应该包含传递给提供者的数据！

当我在客户端需要上下文api时，这个上下文api工作得很好，但在服务器端，它似乎失败了。

这是react/react dom 16.4.1。

评论后的更新，下面是我如何使用消费者的方法：

import * as React from 'react';
import { ServerConsumer } from "./serverContext";
import { ContentStateProvider } from "./ContentStateProvider";

const renderChildrenWithServerData = (props) => (state, ...rest) => {
  console.log({ state, props, rest }, 'I AM DATA', ServerConsumer);

  return (
    <ContentStateProvider currentState={state} {...props} />
  );
};

export class ContentProvider extends React.Component {
  render() {
    // console.log({ Consumer }, 'CONTEXT is cool');
    return (
      <ServerConsumer>{renderChildrenWithServerData(this.props)}</ServerConsumer>
    );
  }
}

Answer 1

在这里提到它是因为注释中的所有代码都很难以这种方式访问通过上下文传递的值。

<ServerConsumer>{(value) => { console.log(value)}}</ServerConsumer>

你的消费者版本是：

<ServerConsumer>
  {renderChildrenWithServerData(this.props)}
</ServerConsumer>

renderChildrenWithServerData(this.props)返回无状态组件。您需要在下面提到的级别检索上下文数据，以便将其传递给renderChildrenWithServerData。

<ServerConsumer>
   {(value) => {
     return renderChildrenWithServerData(value, this.props)
   }}
</ServerConsumer>