1

我刚刚开始使用 Cycle.js，到目前为止我很喜欢它，但是我在组件化我的应用程序时遇到了一些问题。

我有这个组件，我想稍后从另一个导入：

// components/header.js

function intent (DOMSource, localStorage) {
  const menuClick$ = DOMSource.select('.header .menu').events('click')

  return {
    menuClick$,
  }
}

function model (menuClick$) {
  const menuToggle = menuClick$
    .startWith(false)
    .mapTo(1)
    .fold((acc, x) => acc + x, 0)
    .map(x => x % 2 === 0)

  return xs
  .combine(
    menuToggle,
  ).map(([toggle]) => ({
    toggle,
  }))
}

function view (state$) {
  return state$.map(state => (
    <header className="header" style={header}>
      <div className="menu" style={menu}>
        <div className="user" style={container}>
          <div className="image" style={image} />
          <div className="name" style={user}>Karen Serfaty</div>
          <div className="arrow" style={arrow} />
        </div>
        { state.toggle
          ? <div className="items" style={list}>
              <span id="logout">Cerrar sesión</span>
            </div>
          : <div />
        }
      </div>
    </header>
  ))
}

function Header (sources) {
  const {
    menuClick$,
  } = intent(sources.DOM)

  const state$ = model(menuClick$)
  const vtree$ = view(state$)

  return {
    DOM: vtree$,
  }
}

export default Header

我想在这里导入它：

// components/index.js

import { html } from 'snabbdom-jsx';
import xs from 'xstream'

import Header from './header'

function main (sources) {
  const header = Header(sources)

  const vtree$ = xs.of(
    <span>
      {header.DOM}
    </span>
  )

  return {
    DOM: vtree$
  }
}

export default main

这是应用程序的根目录：

import {run} from '@cycle/run'
import {makeDOMDriver} from '@cycle/dom'

import main from './components'

const drivers = {
  DOM: makeDOMDriver('#app'),
}

run(main, drivers)

如果我将Header组件直接导入应用程序的根目录，它工作正常，所以我猜我的components/index.js文件有问题？

- 编辑 -

我忘了提到，当我运行代码时，我undefined在浏览器上得到了一个。

4

2 回答 2

2

你const header是一个看起来像这样的流的对象

{ DOM: vTree$ }

要利用它，你应该做这样的事情......

// components/index.js

import { html } from 'snabbdom-jsx';
import xs from 'xstream';

import Header from './header';

function main (sources) {
  const header = Header(sources)

  const vtree$ = header.DOM.map( headerVNode => (
    <span>
      { headerVNode }
    </span>
  ));

  return {
    DOM: vtree$
  }
}

export default main;

于 2017-05-08T16:45:18.863 回答
1

我没有把header它当作一条溪流来对待。在我进行此更改后，它起作用了：

function main (sources) {
  const header = Header(sources)

  const vtree$ = header.DOM
  .map(dom => <span>{dom}</span>)

  return {
    DOM: vtree$
  }
}

感谢@mciparelli 的帮助:)

于 2017-05-08T16:46:00.130 回答