Question

我有一个非常简单的条件渲染方案，如果props.showCalc为真，我将渲染calculator，但如果为false，我将渲染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$}？它们都呈现＆＃34; undefined＆＃34;因为它们是溪流。

我尝试将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方法将链接它们，只有当前面的那些（以及如果）发出一个值时才会触发第二个和第三个。

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

1 个答案: