使用 RxJS 在 cycle.js 中进行条件渲染答案

【问题标题】：Conditional rendering in cycle.js with RxJS使用 RxJS 在 cycle.js 中进行条件渲染
【发布时间】：2017-03-07 04:10:19
【问题描述】：

我有一个非常简单的条件渲染场景，如果props.showCalc 为真，我将渲染calculator，但如果为假，我将渲染title：

function view(sources) {
  const props$ = sources.props
  const titleVDom$ = Title(sources).DOM
  const calcVDom$ = Calculator(sources).DOM
  const vdom$ = props$
    .map((props) =>
      <section className="hero is-fullheight is-primary">
        <div className="hero-head">
        </div>
        <div className="hero-body">
          {props.showCalc ? {calcVDom$} : {titleVDom$}}
        </div>
        <div className="hero-foot">
        </div>
      </section>
    )
  return vdom$
}

这不起作用，因为您不能将流 DOM 传递给 JSX 进行渲染。我一直必须映射流 DOM 才能渲染它。

在这种情况下如何渲染{calcVDom$} 或{titleVDom$}？照原样，它们都呈现“未定义”，因为它们是流。

我试图在渲染函数的中途映射calcVDom$/titleVDom$，但它变得非常混乱。

【问题讨论】：

一个可运行的演示可能会吸引更多愿意提供帮助的人

标签： javascript rxjs reactive-programming jsx rxjs5

【解决方案1】：

您可以在将流映射到 JSX 之前链接流并合并结果吗？类似的东西

function view(sources) {

  const props$ = sources.props;
  const titleVDom$ = Title(sources).DOM;
  const calcVDom$ = Calculator(sources).DOM;

  const vdom$ = props$
    .mergeMap((props) => titleVDom$.map((title) => [ props, title ]))
    .mergeMap((data) => calcVDom$.map((calc) => data.push(calc)))
    .map((data) =>
      <section className="hero is-fullheight is-primary">
      <div className="hero-head">
      </div>
      <div className="hero-body">
        {data[0].showCalc ? {data[2]} : {data[1]}}
      </div>
      <div className="hero-foot">
      </div>
    </section>
  );

  return vdom$;
}

您也可以使用forkJoin 实现同样的目的：

function view(sources) {

  const props$ = sources.props;
  const titleVDom$ = Title(sources).DOM;
  const calcVDom$ = Calculator(sources).DOM;

  return Rx.Observable.forkJoin([
    props$,
    titleVDom$,
    calcVDom$
  ]).map((data) =>
      <section className="hero is-fullheight is-primary">
      <div className="hero-head">
      </div>
      <div className="hero-body">
        {data[0].showCalc ? {data[2]} : {data[1]}}
      </div>
      <div className="hero-foot">
      </div>
    </section>
  );
}

不同之处在于 forkJoin 将同时订阅所有 Observables（触发任何操作），而 mergeMap 方法将链接它们，仅在（并且如果）前面的那些已发出值时触发第二个和第三个。

【讨论】：