如何使用 xstreamjs 渲染多个组件

Question

假设，我想渲染 3 个从数组映射的按钮

export const homePage = soruces => {
const array$ = xs.fromArray([1,2,3])
return {
DOM: array$.map(e => {
return <button id={e}>click</button>
})
};
};

但我只得到 id 为 3 的最新按钮

<div id="app">
<button id="3">click</button>
</div>

如何使用 xstream 或 rxjs 获得像这样呈现的所有按钮

<div id="app">
<button id="1">click</button>
<button id="2">click</button>
<button id="3">click</button>
</div>

Answer 1

这有点取决于你想要实现的目标。你那里的代码基本上是说："我得到三条数据，每条数据在任意时间点"(因为fromArray基本上从数组中逐个获取数据并将其放入流中。 如果您现在要随着时间的推移收集数据，则可以添加fold((buttons, newButton) => buttons.concat(newButton), [])。

但是，如果您恰好有三个数据，那总是应该三个按钮，请不要使用fromArray而是使用正常的Array.map。然后，您可以使用xs.of一次发出三个按钮(与第一部分中一个接一个的比较(