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

Question

我有一个非常简单的条件渲染场景，如果 props.showCalc 为 true，我将渲染 calculator，如果为 false，我将渲染 标题:

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$ 映射到渲染函数的一半，但它变得非常困惑。

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 发出值时触发第二个和第三个。