SolidJS 中的条件样式

Question

我在 SolidJS 中有一个组件，看起来像这样：

const MyComponent: Component = (params) => {
  // ...
  const [votes, setVotes] = createSignal(new Set());
  const toggle = (val: string) => {
    if (votes().has(val)) {
      let _votes = votes();
      _votes.delete(val);
      setVotes(_votes);
    } else {
      let _votes = votes();
      _votes.add(val);
      setVotes(_votes);
    }
  }

  return <>
    <For each={someArray()}>{(opt, i) =>
      <button 
        style={{
          color: `${ votes().has(opt) ? "blue" : "black"}`
        }} 
        onClick={() => { toggle(opt) } }
      >
        {opt()}
      </button>
    }</For>
  </>
}

我想要发生的是，按钮的样式将根据它（opt在 for 循环中）是否存在于集合中而改变votes。

但是，这段代码不起作用。投票更新时它不会更新。

votes 变量确实按预期更新。

当我给投票设置初始值时，会显示正确的样式（但之后不会更新）。

有什么解决方案可以使这项工作有效吗？

Answer 1

@Nick所说的似乎是正确的，尝试将你的toggle方法更改为：

  const toggle = (val: string) => {
    const _votes = votes();
    _votes.has(val) ? _votes.delete(val) : _votes.add(val);
    setVotes(new Set(_votes));
  }

操场

Answer 2

@solid-primitives/setSet中有一个反应原语，您可以直接将其用作状态，而无需. 这可能会为您简化事情。createSignal