Reactjs 使用Apollo、Graphql的跨组件通信体系结构

在构建UI时，通常会出现这样的问题：用户输入组件在视觉上位于拥有状态的组件之外

假设您正在构建一个包含多个步骤的表单向导，该向导必须在单击“下一步”按钮时提交相应的表单：

 class WizardContainer {
   render(){
     return 
       <Wizard>
         <FormContainer/>
         <NavigationContainer/>
       </Wizard>
   }
 }

 class NavigationContainer {
   currentFromContainer(){ ... }       

   render(){
     let FormContainer = currentFormContainer()
     return <FormContainer/>
   }

 class WizardContainer {
   render(){
     return 
       <Navigation title="next", onClick={...}>
    }
 }

类向导容器{
render（）{
返回
}
}
类导航容器{
currentFromContainer（）{…}
render（）{
设FormContainer=currentFormContainer（）
返回
}
类向导容器{
render（）{
返回
}
}

在提交时，必须激发带有当前表单输入的graphql变异。从思想上讲，当前表单的提交代码属于相应的Formcontainer。但操作submit操作在外部

解决与阿波罗和阿波罗链路状态的这种跨组件通信的最佳方法是什么

或者这超出了阿波罗的范围？如果是的话，有哪些惯用的解决方案

---

Redux也不能解决这个问题。人们可以将表单的状态放入中央存储，但提交始终是一个不同的操作。

最近几天一直在做这件事，这迫使我了解了很多关于React的知识，我不知道，而且花了很多时间。我在top/parent组件中有一个React状态，用于存储acti最大的问题是找到一种传播动作的方法，反应上下文对于更长的距离是有益的，但我主要通过道具来传递

然后，接收组件必须是类类型，以便它可以分析SCU中的操作，并确定操作是否会导致某些重新操作（最常见的是渲染）

我不认为你应该复制解决方案，而是自己动手，用它来了解反应的深度，我向你保证它会有回报的

我说过你应该从这开始

  constructor() {
    super()
    this.state = {
      dispatch: this.dispatch,
      type: null,
      payload: null
    }
  }

  dispatch = (type, payload) => {
    switch (type) {
      case "user_set":
        setApolloCache({ userId: payload.userId })
   this.setState(prevState => ({
       dispatch: prevState.dispatch,
       type,
       payload
     }))
        break
   ...