Question

我想在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$
}

Answer 1

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$
}

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

1 个答案: