cycle.js - 嵌入組件在其他組件

的JSX我想裏面嵌入一個JSX組件cycle.js。cycle.js - 嵌入組件在其他組件

我已經看到了使用JSX當其他組件內嵌入部件的documentation但不是一個例子，我不能在網上找到任何的例子。對於RxJs這樣的整個反應性事物我很新穎。

在documentation的例子，他們似乎只是plonk的子組件到父組件（現在我可以看到他們把它傳遞到xs.combine（）函數）：

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

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

但是，當我這樣做的JSX它會導致它只是返回undefined到組件出現的DOM（見接近這個代碼的底部）：

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？我正在使用RxJs。

編輯：我現在已經想出這個它仍然具有相同的未定義的結果，但看起來它是在正確的軌道上：

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

來源

2017-03-06 BeniaminoBaggins

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

來源

2017-03-06 05:24:27 BeniaminoBaggins

cycle.js - 嵌入組件在其他組件

回答

相關問題