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

Question

我有一个非常简单的条件渲染场景，如果 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$}？照原样，它们都呈现 "undefined" 因为它们是流。

我试图将 calcVDom$/titleVDom$ 映射到渲染函数的一半，但它变得非常混乱。

Answer 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 将同时订阅所有 Observable（触发任何操作），而 mergeMap 方法将链接它们，仅在（如果）前面的 Observable 发出值时触发第二个和第三个。

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

Conditional rendering in cycle.js with RxJS

javascript

jsx

reactive-programming

rxjs

rxjs5