在cyclejs中，如何使用“if else”渲染組件

Question

function componentA(sources$) {
   return {
      dom$: ...,
      http$: ...
  }
}    

function componentB(sources$) {
   return {
      dom$: ...,
      http$: ...
  }
}

function main(sources$) {    
    sources$.props.pipe(
       switchMap(props=> {
           if (props.showA) {
              const sinksA$ = componentA(sources$);
           } else {
              const sinksB$ = componentB(sources$);
          }
      })
   )

  return {
           // how to make dom$ and htttp$ ?
  }
}

那么如何分別合並兩個不同的流呢？

Answer 1

這可能會實現您想要實現的目標：

function main(sources) {
  // Component A
  const aSinks$ = sources.props
    .filter(props => props.showA)
    .mapTo(componentA(sources));
  const aDom$ = aSinks$.map(sinks => sinks.dom)
  const aHttp$ = aSinks$.map(sinks => sinks.http)

  // Component B
  const bSinks$ = sources.props
    .filter(props => !props.showA)
    .mapTo(componentB(sources));
  const bDom$ = bSinks$.map(sinks => sinks.dom)
  const bHttp$ = bSinks$.map(sinks => sinks.http)

  return {
    dom$: xs.merge(aDom$, bDom$),
    http$: xs.merge(aHttp$, bHttp$),
  };
}

如果您需要比此示例代碼更多的解釋，請告訴我。