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 - 嵌入组件在其他组件

回答

相关问题