Problem mit Komponenten in Cycle.js

Question

Ich fange gerade mit Cycle.js, liebe es so weit, aber ich habe einige Probleme mit der Komponente meiner App.

Ich habe diese Komponente, die ich später von einem anderen importieren möchten:

// 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

Und ich will es importieren hier:

// 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

Und hier ist die Wurzel der App:

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

 
import main from './components' 
 

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

 
run(main, drivers)

Wenn ich die Header Komponenten direkt an die Wurzel der App importieren funktioniert es gut Ich vermute, so ist es etwas falsch in meine components/index.js Datei?

- Bearbeiten -

ich vergessen zu erwähnen, wenn ich den Code ausführen, um ein undefined auf dem Browser Ich erhalte.

Answer 1

Ihre const header ein Objekt von Streams, die wie dieser Gebrauch davon

{ DOM: vTree$ }

zu machen sucht, sollten Sie etwas tun ...

// 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

Ich behandelte header nicht als wäre es ein Stream. Nachdem ich diese Änderung vorgenommen hat es funktionierte:

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

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

    return { 
    DOM: vtree$ 
    } 
} 

Danke für die Hilfe @mciparelli :)