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组件时，它似乎不包含任何内容。它应该包含传递给提供者的数据！

当我需要在客户端上使用上下文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）返回无状态组件。您需要以下面提到的级别检索Context数据，然后将其传递给renderChildrenWithServerData

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

使SSR与React Context API一起使用

1 个答案: