首页 文章

使用Apollo，Graphql的跨组件通信架构

提问于
浏览 次
0

通常在构建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={...}>
    }
 }

在提交时，必须触发来自当前表单的输入的graphql变异 . 在意识形态上，当前表单的提交代码属于相应的Formcontainer . 但行动提交行动在外面 .

用apollo和apollo-link-state解决这种跨组件通信的最佳方法是什么？

或者这是在阿波罗范围之外的东西？如果是这样，那么一些反应惯用的解决方案是什么？

Redux也没有解决这个问题 . 可以将表单的状态放到中央存储区，但提交始终是一个不同的操作 .

reactjs graphql apollo

1 回答

  • 0

    在最后几天一直在做这件事，这迫使我学到了很多关于React的知识，我不知道并且花了很多时间 . 我在top / parent组件中有一个React状态，它存储要传递给子节点的动作 . 最大的问题是找到一种传播动作的方法，React Context适用于较长距离，但我主要通过道具传递它 .

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

    我不认为你应该复制解决方案，而是自己动手并用它来学习React的深度，我保证你会得到回报！

    说过你应该开始这个 .

    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
   ...
    回复于

相关问题