标签: solid-js

SolidJS 中的条件样式

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

Run Code Online (Sandbox Code Playgroud)

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

javascript typescript solid-js

Jom*_*omy

2022 05-23

4
推荐指数

2
解决办法

3234
查看次数

SolidJS 上下文提供程序规范

我正在遵循教程中的上下文示例，我从示例中了解到的是使用自定义提供程序：

import { createSignal, createContext, useContext } from "solid-js";

const CounterContext = createContext();

export function CounterProvider(props) {
  const [count, setCount] = createSignal(props.count || 0),
    counter = [
      count,
      {
        increment() {
          setCount((c) => c + 1);
        },
        decrement() {
          setCount((c) => c - 1);
        },
      },
    ];

  return (
    <CounterContext.Provider value={counter}>
      {props.children}
    </CounterContext.Provider>
  );
}

export function useCounter() {
  return useContext(CounterContext);
}

Run Code Online (Sandbox Code Playgroud)

我有三个问题：

除了上面的示例之外，我找不到任何有关如何定义自定义上下文提供程序的规范，是否有任何标准或规范可供遵循？
此示例中 CounterContext 和 CounterProvider 之间的绑定在哪里？是在这一行吗？<CounterContext.Provider value={counter}>。与createSignal结合然后在计数器中使用？

所以依赖关系是：createSignal->counter->CounterProvider？

我找不到任何关于具有更复杂对象的 createContext 的 jsx 格式的上下文示例，只能使用打字稿语法 …

javascript jsx solid-js

Typ*_*ypo

2022 11-19

4
推荐指数

1
解决办法

2627
查看次数

现代网络应用程序中可恢复性、水合性和协调性之间的区别？

可恢复性、水合性和协调性之间的主要区别是什么？

我们知道可恢复性是 Web 应用程序的未来，是否有可能使当前的大部分元框架（Nextjs、Remix、Sveltekit、Solidstart 等）可恢复？

next.js svelte remix solid-js qwik

Har*_*lam

lucky-day

4
推荐指数

1
解决办法

826
查看次数

我如何对 SolidJS 中窗口大小的变化做出反应？

简单的问题。我如何对solid-js 中窗口大小的变化做出反应？我需要使用进行一些计算document.body.clientWidth，但是当情况发生变化时我无法重新执行任何内容。我尝试过直接使用、备忘录、非on()备忘录函数以及值。什么都不起作用。一定有一些简单的东西我错过了。

javascript solid-js

Nic*_*ada

lucky-day

4
推荐指数

1
解决办法

1505
查看次数

如何在 Solid.js 中使用 Ref？

所以我正在学习并开始使用Solid.js，我想知道我们如何处理solid.js中的ref，就像react中的useRef一样。

我检查文档我尝试这样的事情：

let navigationOuterRef: HTMLDivElement let navigationRef: HTMLUListElement const MenuNavbar = (props: {layoutDatas: LayoutNavigation[]}) => { const [priorityItems, setPriorityItems] = createSignal<LayoutNavigation[]>(props.layoutDatas); //.... return ( <div ref={navigationOuterRef} class="...."> <ul ref={navigationRef} class="..."> <For each={priorityItems()}> {(labelName) => ( <li class="flex items-center cursor-pointer"> {labelName.label} </li> )} </For> </ul> //...
Run Code Online (Sandbox Code Playgroud)
它有效...但我收到了警告消息，例如

createRoot在or之外创建的计算render永远不会被处理

所以我认为问题是我在组件外部创建了引用，因此如果没有适当的上下文，如果卸载它就无法处理它，但是如果我在组件中移动了引用声明，我在 TS 中会出现此错误

变量“navigationOuterRef”在分配之前使用。

那么我做错了什么以及正确的方法是什么？

solid-js

Shu*_*ang

lucky-day

4
推荐指数

1
解决办法

2714
查看次数

SolidJS：打字稿错误表示值的类型为“未定义”，尽管检查它不是

我有一些 SolidJS 代码，例如：

{value() !== undefined && <img src={srcs[value()]} />}
Run Code Online (Sandbox Code Playgroud)
哪里value有信号。value()我在说以下内容时遇到 TypeScript 错误Type 'undefined' cannot be used as an index type.ts(2538)

这是什么意思以及如何在没有的情况下解决这个问题// @ts-ignore？

solid-js

abc*_*abc

lucky-day

3
推荐指数

1
解决办法

1095
查看次数

Solid JS 是否有与 React.useCallback 等效的功能？

Solid 有createMemo，我认为它可能有用，但它说“备忘录函数不应通过调用设置器来更改其他信号（它应该是“纯”）。”，这不适合我的用例。

solid-js

abc*_*abc

lucky-day

3
推荐指数

1
解决办法

1570
查看次数

Solid JSX 中的动态标签名称

我想在 SolidJS 中动态设置 JSX 标签名称。我来自 React，那里做起来相当简单：
\n
/* Working ReactJS Code: */\nexport default MyWrapper = ({ children, ..attributes }) => {\n const Element = "div";\n\n return (\n <Element {...attributes}>\n {children}\n </Element>\n )\n}\n
Run Code Online (Sandbox Code Playgroud)\n
但是当我尝试在 SolidJS 中执行相同的操作时，出现以下错误：
\n
/* Console output when trying to do the same in SolidJS:\xc2\xa0*/\ndev.js:530 Uncaught (in promise) TypeError: Comp is not a function\n at dev.js:530:12\n at untrack (dev.js:436:12)\n at Object.fn (dev.js:526:37)\n at runComputation (dev.js:706:22)\n at updateComputation (dev.js:691:3)\n at devComponent (dev.js:537:3)\n at createComponent (dev.js:1236:10)\n at …
Run Code Online (Sandbox Code Playgroud)

solid-js

Bir*_*rbi

2022 05-31

3
推荐指数

1
解决办法

1814
查看次数

SolidJs中有类似onRouteChange的事件吗？

每次 url 更改时我都需要运行一些逻辑。

我的应用程序使用solid-app-router https://github.com/solidjs/solid-router

我如何订阅 SolidJS 中的路由器更改？

javascript url routes solid-js

Fel*_*aro

lucky-day

3
推荐指数

1
解决办法

899
查看次数

Solid App Router 元素不是渲染组件 - 对象对象

刚开始使用 SolidJS 和实体路由器，已经卡在路线上，没有渲染“元素”内的组件。相反，它显示“[object Object][object Object]”

请参阅： https ://codesandbox.io/s/solidjs-shopping-cart-wj5zvr?file=/src/App.jsx

下面是代码：

import { Router, Route } from "solid-app-router"; function Home() { return <h1>Home page here...</h1>; } function Cart() { return <h1>Cart page here...</h1>; } function App() { return ( <> <header>header...</header> <Router> <Route path="/" element={<Home />} /> <Route path="/cart" element={<Cart />} /> </Router> <footer>footer..</footer> </> ); } export default App;
Run Code Online (Sandbox Code Playgroud)

solid-js

Mic*_*ano

lucky-day

2
推荐指数

1
解决办法

776
查看次数

标签统计

solid-js ×10

javascript ×4

jsx ×1

next.js ×1

qwik ×1

remix ×1

routes ×1

svelte ×1

typescript ×1

url ×1

标签 统计

标签统计