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

我想要发生的是，按钮的样式会根据它（for 循环中的 opt）是否出现在 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));
  }

Playground

Answer 2

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

Answer 3

目前有两种方法可以在元素上定义内联样式属性：

使用带有 kebab-case 个键的对象。
像处理 HTML 个元素一样使用纯字符串。

您可以使用三元运算或其他条件表达式来有条件地创建值。

const App = () => {
  const [cond, setCond] = createSignal(true);

  const toggle = () => setCond(c => !c);

  return (
    <div onclick={toggle}>
      <span>conditon: {cond() ? 'true' : 'false'}</span>
      {` `}
      <span
        style={{ 'background-color': cond() ? 'red' : 'blue', color: 'white' }}
      >
        Using Object
      </span>
      {` `}
      <span
        style={`background-color: ${cond() ? 'red' : 'blue'}; color: white;`}
      >
        Using String
      </span>
    </div>
  );
};

render(App, document.querySelector('#app'));

注意：问题已经得到解答，但让我们通过提供一般性答案来证明它的未来。

SolidJS 中的条件样式

Conditional styling in SolidJS

javascript

typescript

solid-js