使用 Cycle.js 中的组件时出现问题

Issue using components in Cycle.js

我刚刚开始使用 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

你的 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;

我没有把 header 当作一个流。在我进行此更改后,它起作用了:

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

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

  return {
    DOM: vtree$
  }
}

感谢@mciparelli 的帮助:)