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

【问题标题】：In cyclejs, how to render a component with "if else"在cyclejs中，如何使用“if else”渲染组件
【发布时间】：2020-09-10 09:44:22
【问题描述】：

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$ ?
  }
}

那么如何分别合并两个不同的流呢？

【问题讨论】：

标签： cyclejs

【解决方案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$),
  };
}

如果您需要比此示例代码更多的解释，请告诉我。

【讨论】：