javascript - 在 Cycle.js 中使用组件的问题

Question

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

Answer 1

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