将道具传递给 child 组件 Cyclejs
Passing props to child component Cyclejs
我正在研究 CycleJs,我正在寻找一种正确的方法来处理将道具传递给 child 组件。
实际上,我有以下东西:
import {div, input} from '@cycle/dom'
export function App(sources) {
const inputOnChange$ = sources.DOM.select('input').events('input')
const streamofResult = inputOnChange$
.map(e => e.target.value)
.startWith('')
.map(defaultInput => {
const title = Title({value: defaultInput})
return div([
title,
input({attrs: {type: 'text'}})
])
})
const sinks = {DOM: streamofResult}
return sinks
}
export function Title(sources) {
return div(sources.value)
}
它只允许进行一些输入,并将其显示在名为 Title 的 child 组件中。
我想我应该使用一个流来处理将道具传递给我的 child。
但我不明白为什么在这种简单的情况下使用流而不是基元会是更好的解决方案?
有些地方我可能没有理解。
你没有误会什么。没有正确的答案。如果你知道一个事实你永远不想在初始化后更改 props
那么你可以将 props
作为原语传递,但更常见的约定是发送 props$
因为做一些像 O.of(x)
vs x
(假设 RxJS)这样的事情并没有太大的成本,并且在任何地方使用流都符合框架的理念。此外,有时您希望在组件初始化后动态更改属性,此时流是合适的。
为所有组件保持一致的 props
或 props$
约定可以让您更轻松地阅读代码,因为您无需思考,"Does this component use a primitive or a stream for props...?"
我正在研究 CycleJs,我正在寻找一种正确的方法来处理将道具传递给 child 组件。
实际上,我有以下东西:
import {div, input} from '@cycle/dom'
export function App(sources) {
const inputOnChange$ = sources.DOM.select('input').events('input')
const streamofResult = inputOnChange$
.map(e => e.target.value)
.startWith('')
.map(defaultInput => {
const title = Title({value: defaultInput})
return div([
title,
input({attrs: {type: 'text'}})
])
})
const sinks = {DOM: streamofResult}
return sinks
}
export function Title(sources) {
return div(sources.value)
}
它只允许进行一些输入,并将其显示在名为 Title 的 child 组件中。
我想我应该使用一个流来处理将道具传递给我的 child。
但我不明白为什么在这种简单的情况下使用流而不是基元会是更好的解决方案?
有些地方我可能没有理解。
你没有误会什么。没有正确的答案。如果你知道一个事实你永远不想在初始化后更改 props
那么你可以将 props
作为原语传递,但更常见的约定是发送 props$
因为做一些像 O.of(x)
vs x
(假设 RxJS)这样的事情并没有太大的成本,并且在任何地方使用流都符合框架的理念。此外,有时您希望在组件初始化后动态更改属性,此时流是合适的。
为所有组件保持一致的 props
或 props$
约定可以让您更轻松地阅读代码,因为您无需思考,"Does this component use a primitive or a stream for props...?"