reactjs - NextJS SSR 中的轨道安装组件

Question

以下内容适用于通过 NextJS 的 SSR。

我正在使用 React 的上下文来跟踪某些已安装组件的 ID。要点是

class Root extends React.Component {
  getChildContext () {
    return {
      registerComponent: this.registerComponent
    }
  }

  registerComponent = (id) => {
    this.setState(({ mountedComponents }) => {
      return { mountedComponents: [...mountedComponents, id ] }
    })
  }

  ...
}

class ChildComponent {
  static contextTypes = { registerComponent: PropTypes.func }

  constructor(props) {
    super(props)

    props.registerComponent(props.id)
  }
}

不幸的是，这仅适用于客户端。 this.state.mountedComponents 在服务器上始终为 []。是否有另一种方法可以在服务器端跟踪这些组件？基本上，我需要向脚本提供 ids 以在文档的 head 中运行 - 等待客户端应用程序安装、运行并手动附加到 head 有点太慢了。

更新

这是一个简单的示例存储库:https://github.com/tills13/nextjs-ssr-context

this.context 在 Child 的构造函数中是 undefined，如果我将其移动到 componentDidMount (目前在存储库中以这种方式设置)，它可以工作，但我希望在服务器端解决这个问题。我并没有对上下文死心塌地，如果有其他方法可以做到这一点，我洗耳恭听。

Answer 1

我对此进行了深入研究，我的感觉是，由于多种原因，这是不可能的。

setState 更新是异步的，在您的情况下不会执行。

您的provider的渲染甚至会在状态更新之前发生，因此注册代码将稍后执行，并且渲染函数没有最新状态

我放置了不同的console.log，下面是我得到的

Provider constructed with { mountedComponents: [],
  name: 'name-Sun Jun 24 2018 19:19:08 GMT+0530 (IST)' }
getDerivedStateFromProps
Renderring Provider Component { mountedComponents: [],
  name: 'name-Sun Jun 24 2018 19:19:08 GMT+0530 (IST)' }
data loaded
constructor Child { id: '1' } { registerComponent: [Function: value] }
Register Component called 1 { mountedComponents: [],
  name: 'name-Sun Jun 24 2018 19:19:08 GMT+0530 (IST)' }
Registering component 1
constructor Child { id: '2' } { registerComponent: [Function: value] }
Register Component called 2 { mountedComponents: [ '1' ],
  name: 'tarun-Sun Jun 24 2018 19:19:08 GMT+0530 (IST)' }
Registering component 2
constructor Child { id: '3' } { registerComponent: [Function: value] }
Register Component called 3 { mountedComponents: [ '1', '2' ],
  name: 'name-Sun Jun 24 2018 19:19:08 GMT+0530 (IST)' }
Registering component 3
constructor Child { id: '4' } { registerComponent: [Function: value] }
Register Component called 4 { mountedComponents: [ '1', '2', '3' ],
  name: 'name-Sun Jun 24 2018 19:19:08 GMT+0530 (IST)' }
Registering component 4

该信息实际上仅在 componentDidMount 发生时才可用。但是，由于服务器端渲染不会发生这种情况，因此您无法获取数据。

我正在进一步挖掘，看看是否有任何可用的黑客，但到目前为止我还不确定