javascript – cycle.js – 在其他组件的jsx中嵌入组件

2019年7月28日 160次阅读

我想在jsx中嵌入一个cycle.js组件.

我在documentation中看到了在其他组件中嵌入组件的示例,但在使用JSX时却没有,我在网上找不到任何示例.我对RxJs等整个反应性事物都很陌生.

在documentation的示例中,他们似乎只是将子组件插入到父组件中(现在我可以看到它们将它传递给xs.combine()函数)：

  const childVDom$= labeledSlider.DOM;
  const childValue$= labeledSlider.value;

  const vdom$= xs.combine(childValue$, childVDom$)
    .map(([value, childVDom]) =>
      div([
        childVDom,
        div({style: {

但是当我在JSX中执行它时,它会导致它将undefined返回到组件所在的DOM(请参阅此代码底部附近)：

import { html } from 'snabbdom-jsx'
import * as dom from '@cycle/dom'
import Button from 'components/button'
import Rx from 'rxjs/Rx'
import styles from './index.styl'

export default function Title(sources) {
  const sinks = {
    DOM: view(sources)
  }
  return sinks
}

function view(sources) {

  const props$= Rx.Observable.of({
    label: 'Try Now'
  })

  const childSources = {
    DOM: sources.DOM,
    props: props$
  }

const button = Button(childSources)
  const vdom$= props$
    .map(() =>
      <div className="container has-text-centered">
        <p className="logo">
          <img className={`${styles.img}`}
            src="src/img/logo_transparent_background.png"
          />
        </p>
        <h4 className="subtitle is-4">
          xxx
      </h4>
        {button.DOM}<------- component
      </div>)

  return vdom$
}

现在button.DOM是一个可观察的：

import Rx from 'rxjs/Rx'
import { html } from 'snabbdom-jsx'

export default function Button(sources) {
  const sinks = {
    DOM: view(sources)
  }
  return sinks
}

function view(sources) {
  const props$= sources.props
  const vdom$= props$
    .map(props =>
      <a className="button is-primary is-large is-outlined">
        {props.label}
      </a>
    )
  return vdom$
}

如何在没有未定义的情况下将其添加到jsx？我正在使用RxJs.

编辑：我现在已经提出了这个仍然具有相同的未定义结果,但似乎它是在正确的轨道上：

function view(sources) {

  const props$= Rx.Observable.of({
    label: 'Try Now'
  })

  const childSources = {
    DOM: sources.DOM,
    props: props$
  }

const button = Button(childSources)
const childVDom$= button.DOM
  const vdom$= Rx.Observable.of(childVDom$)
    .map((childVDom) =>
      <div className="container has-text-centered">
        <p className="logo">
          <img className={`${styles.img}`}
            src="src/img/logo_transparent_background.png"
          />
        </p>
        <h4 className="subtitle is-4">
          xxx
      </h4>
        {childVDom}
      </div>)

  return vdom$
}

最佳答案 button.DOM已经是一个流,因此可以直接映射.我正在绘制错误的东西.这是解决方案：

function view(sources) {

  const props$= Rx.Observable.of({
    label: 'Try Now'
  })

  const childSources = {
    DOM: sources.DOM,
    props: props$
  }

const button = Button(childSources)
const childVDom$= button.DOM
  const vdom$= childVDom$
    .map((childVDom) =>
      <div className="container has-text-centered">
        <p className="logo">
          <img className={`${styles.img}`}
            src="src/img/logo_transparent_background.png"
          />
        </p>
        <h4 className="subtitle is-4">
          xxx
      </h4>
        {childVDom}
      </div>)

  return vdom$
}
点赞