cycle.js - 다른 구성 요소의 jsx에 구성 요소를 포함하십시오.

Question

jsx 내에 cycle.js 구성 요소를 포함시키고 싶습니다.

documentation에서 다른 구성 요소 안에 구성 요소를 포함하는 예를 보았지만 JSX를 사용할 때는 그렇지 않고 온라인에서 예제를 찾을 수 없습니다. 나는 RxJs와 같은 전체 반응하는 것에 아주 새롭다.

const childVDom$ = labeledSlider.DOM; 
    const childValue$ = labeledSlider.value; 

    const vdom$ = xs.combine(childValue$, childVDom$) 
    .map(([value, childVDom]) => 
     div([ 
     childVDom, 
     div({style: { 

하지만 경우 : documentation의 예에서

그들은 단지 상위 구성 요소에 하위 구성 요소를 plonk하는 것 (지금은 그들이 xs.combine에() 함수를 전달할 볼 수 있습니다) 나는 그것이 단지 구성 요소가가는 DOM에 정의되지 않은 반환됩니다 JSX에서 할 (이 코드의 하단 참조)

import { html } from 'snabbdom-jsx' 
import * as dom from '@cycle/dom' 
import Button from 'components/button' 
import Rx from 'rxjs/Rx' 
import styles from './index.styl' 

export default function Title(sources) { 
    const sinks = { 
    DOM: view(sources) 
    } 
    return sinks 
} 

function view(sources) { 

    const props$ = Rx.Observable.of({ 
    label: 'Try Now' 
    }) 

    const childSources = { 
    DOM: sources.DOM, 
    props: props$ 
    } 

const button = Button(childSources) 
    const vdom$ = props$ 
    .map(() => 
     <div className="container has-text-centered"> 
     <p className="logo"> 
      <img className={`${styles.img}`} 
      src="src/img/logo_transparent_background.png" 
      /> 
     </p> 
     <h4 className="subtitle is-4"> 
      xxx 
     </h4> 
     {button.DOM}<------- component 
     </div>) 

    return vdom$ 
} 

이제 button.DOM는 관측 :

import Rx from 'rxjs/Rx' 
import { html } from 'snabbdom-jsx' 

export default function Button(sources) { 
    const sinks = { 
    DOM: view(sources) 
    } 
    return sinks 
} 

function view(sources) { 
    const props$ = sources.props 
    const vdom$ = props$ 
    .map(props => 
     <a className="button is-primary is-large is-outlined"> 
     {props.label} 
     </a> 
    ) 
    return vdom$ 
} 

jsx에 정의되지 않은 상태로 어떻게 추가합니까? 나는 RxJ를 사용하고있다.

편집 :

function view(sources) { 

    const props$ = Rx.Observable.of({ 
    label: 'Try Now' 
    }) 

    const childSources = { 
    DOM: sources.DOM, 
    props: props$ 
    } 

const button = Button(childSources) 
const childVDom$ = button.DOM 
    const vdom$ = Rx.Observable.of(childVDom$) 
    .map((childVDom) => 
     <div className="container has-text-centered"> 
     <p className="logo"> 
      <img className={`${styles.img}`} 
      src="src/img/logo_transparent_background.png" 
      /> 
     </p> 
     <h4 className="subtitle is-4"> 
      xxx 
     </h4> 
     {childVDom} 
     </div>) 

    return vdom$ 
} 

Answer 1

button.DOM는 이미 스트림은이 매핑 될 수 있도록 : 지금 여전히 같은 정의되지 않은 결과를 가지고 있지만 그것이 바른 길에처럼 보이는이 함께 올라와있다 직접. 나는 잘못된 것을 매핑하고 있었다. 해결책입니다 :

function view(sources) { 

    const props$ = Rx.Observable.of({ 
    label: 'Try Now' 
    }) 

    const childSources = { 
    DOM: sources.DOM, 
    props: props$ 
    } 

const button = Button(childSources) 
const childVDom$ = button.DOM 
    const vdom$ = childVDom$ 
    .map((childVDom) => 
     <div className="container has-text-centered"> 
     <p className="logo"> 
      <img className={`${styles.img}`} 
      src="src/img/logo_transparent_background.png" 
      /> 
     </p> 
     <h4 className="subtitle is-4"> 
      xxx 
     </h4> 
     {childVDom} 
     </div>) 

    return vdom$ 
}