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$ 
    } 
} 

덕분에 도움 :)