将道具传递给子组件Cyclejs(Passing props to child component Cyclejs)

我正在研究CycleJs，我正在寻找一种合适的方法来处理传递道具到子组件。

实际上，我有以下东西：

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的子组件中。

我想我应该使用一个流来处理传递给我孩子的道具。

但是我不明白为什么在这个简单的使用流而不是原语的情况下它会是一个更好的解决方案？

有些东西我可能还没有理解。

I m studying CycleJs and I m looking for a proper way to handle passing props to child component.

Actually, I m having the following stuff :

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

It simply allows to make some inputs, and to display it in a child component called Title.

I think I should use a stream to handle passing props to my child.

But I don't understand why it would be a better solution in this simple to use a stream instead of a primitive ?

There is something that I probably have not understood.

最满意答案

你没有误解任何事情。 没有正确的答案。 如果你知道一个事实，你将永远不想在初始化之后更改props ，那么你可以将props作为原始传递，但更常见的惯例是发送props$因为它做的事情并不像O.of(x)那么昂贵O.of(x) vs x （假设RxJS）并且在任何地方使用流都符合框架的哲学。 此外，有时您需要在组件初始化后动态更改属性，其中流是合适的。

为所有组件保持一致的props或props$约定可以使阅读代码更容易，因为您不必考虑，“这个组件是否使用原语或流来获取道具......？”

You haven't misunderstood anything. There is no right answer. If you know for a fact you'll never want to change the props after initialization then you could pass the props as a primitive, but the more common convention is to send a props$ since it's not much costlier to do something like O.of(x) vs x (assuming RxJS) and using streams everywhere is consistent with the philosophy of the framework. Additionally, there are occasions when you'll want to change the properties dynamically after component initialization, where a stream is appropriate.

Keeping a consistent props or props$ convention for all your components can make reading the code easier since you won't have to think, "Does this component use a primitive or a stream for props...?"

将道具传递给子组件Cyclejs(Passing props to child component Cyclejs)

我正在研究CycleJs，我正在寻找一种合适的方法来处理传递道具到子组件。

实际上，我有以下东西：

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的子组件中。

我想我应该使用一个流来处理传递给我孩子的道具。

但是我不明白为什么在这个简单的使用流而不是原语的情况下它会是一个更好的解决方案？

有些东西我可能还没有理解。

I m studying CycleJs and I m looking for a proper way to handle passing props to child component.

Actually, I m having the following stuff :

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

It simply allows to make some inputs, and to display it in a child component called Title.

I think I should use a stream to handle passing props to my child.

But I don't understand why it would be a better solution in this simple to use a stream instead of a primitive ?

There is something that I probably have not understood.

最满意答案

你没有误解任何事情。 没有正确的答案。 如果你知道一个事实，你将永远不想在初始化之后更改props ，那么你可以将props作为原始传递，但更常见的惯例是发送props$因为它做的事情并不像O.of(x)那么昂贵O.of(x) vs x （假设RxJS）并且在任何地方使用流都符合框架的哲学。 此外，有时您需要在组件初始化后动态更改属性，其中流是合适的。

为所有组件保持一致的props或props$约定可以使阅读代码更容易，因为您不必考虑，“这个组件是否使用原语或流来获取道具......？”

You haven't misunderstood anything. There is no right answer. If you know for a fact you'll never want to change the props after initialization then you could pass the props as a primitive, but the more common convention is to send a props$ since it's not much costlier to do something like O.of(x) vs x (assuming RxJS) and using streams everywhere is consistent with the philosophy of the framework. Additionally, there are occasions when you'll want to change the properties dynamically after component initialization, where a stream is appropriate.

Keeping a consistent props or props$ convention for all your components can make reading the code easier since you won't have to think, "Does this component use a primitive or a stream for props...?"