reactive-programming - 如何使用 xstreamjs 渲染多个组件

Question

假设，我想渲染从 Array 映射的 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发出三个按钮（与第一部分中的一个一个相比）