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

以下内容适用于通过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在服务器上始终是[]。还有另一种方法可以在服务器端跟踪这些组件吗？基本上，我需要将id提供给脚本以在文档的head中运行-等待客户端应用程序挂载，运行并手动附加到头部有点太慢。

更新

这是一个简单的示例存储库:https://github.com/tills13/nextjs-ssr-context
this.context是undefined的构造函数中的Child，如果我将其移到componentDidMount(当前在存储库中以这种方式设置)，它可以工作，但我希望在服务器端解决此问题。我对context并没有犹豫，如果还有另一种方法可以做到，那么我无所不能。

最佳答案

我已经对此进行了深入研究，我的感觉是，由于多种原因，这是不可能的。
setState更新是异步的，在您的情况下将不会执行。
provider的渲染甚至会在状态更新之前发生，因此注册代码将在以后执行，并且render函数没有最新状态

我输入了不同的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出现时才可用。但是由于不会发生服务器端渲染，因此您不会获得数据。

我正在进一步研究是否有可用的黑客手段，但是到目前为止，我不确定

关于reactjs - SSR中的NextJS轨道安装组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50804825/