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

私はそれはので、私は推測している正常に動作し、アプリケーションのルートに直接 Headerコンポーネントをインポートする場合で何か問題がある

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

 
import main from './components' 
 

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

 
run(main, drivers)

：10

そして、ここでは、アプリのルートです私のcomponents/index.jsファイルですか？

- 編集 -

私は、コードを実行したときに、私は、ブラウザ上でundefinedを得ていることを言及するのを忘れてしまいました。あなたのconst header

Answer 1

は...、あなたがこのような何かを行う必要があり、それを利用するために、この

{ 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;

Answer 2

私はそれがストリームであるかのようにheaderを扱っていませんでした。私はこの変更を行った後、それが働いた：

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

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

    return { 
    DOM: vtree$ 
    } 
} 

おかげで助け:)