在Vue组件中调用React组件的Context/Provider，不成功

[Wowoy]

trafficstars

在Vue组件中调用React组件的Context/Provider 场景，不成功。

因为provider和context 组件的componentDidMount执行顺序有问题： 理应为：context先，provider 后；但是现状反过来了

[devilwjp]

@Wowoy 能提供一个范例吗？

[devilwjp]

@Wowoy 亲测没有问题，见如下的范例

<template>
  <MyProvider :value="content">
    <!--  React组件中使用useContext  -->
    <ReactComponentInVue/>
  </MyProvider>
</template>

<script>
import { applyReactInVue } from 'vuereact-combined'
import { createContext, createElement, useContext } from 'react'

// React Context
const MyContext = createContext('default context value')

// A React Component
function ReactComponent() {
  const contextValue = useContext(MyContext)
  return createElement('div', {}, contextValue)
}

export default {
  data() {
    return {
      content: 'hahahahaha!'
    }
  },
  mounted() {
    clearInterval(this.timer)
    // 每秒变更React Context的value
    this.timer = setInterval(() => {
      this.content = 'context value:' + Math.random()
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  components: {
    ReactComponentInVue: applyReactInVue(ReactComponent),
    // 把Provider当作React组件直接转换
    MyProvider: applyReactInVue(MyContext.Provider),
  }
}
</script>

React函数组件ReactComponent通过useContext可以正常接收到Context的value变化