标签: solid-js

在他们的渲染列表教程中，他们说：

该<Index>组件是为这些情况提供的。根据经验，在使用基元时使用<Index>.

和

<For>关心数组中的每条数据，并且该数据的位置可以改变；<Index>关心数组中的每个索引，并且每个索引处的内容都可以更改。

这两句话对我来说都没有意义。“使用基元时”是什么意思？我总是使用数组。有人可以澄清何时使用ForvsIndex吗？

在处理 SolidJS 项目时，您可能会开始在 JS 控制台中看到以下警告消息：

computations created outside a `createRoot` or `render` will never be disposed

SolidJS 的 Github 存储库问题中提供了一些相关信息。但读完它们后，我仍然不太确定这到底是怎么回事，以及我的代码是否真的做错了什么。

我设法找到它的来源，并根据文档找到修复方法。因此，我为那些在谷歌上搜索此警告消息的人提供解释和解决方案。

当我尝试在 Solid.js 项目中使用 Web 组件（而不是构建一个）时，它无法识别该标签，因为它不是固有元素。如何设置solid.js 来识别Web 组件？

即使我的应用程序包含在 Router 标签中，当我使用useNavigate()或<Navigate />元素时，我也会收到相同的错误login.tsx:27 Error: Make sure your app is wrapped in a <Router />

这是我的index.tsx

/* @refresh reload */
import { render } from 'solid-js/web';

import './index.css';
import App from './App';
import { Router } from 'solid-app-router';

render(
    () => (
        <Router>
            <App />
        </Router>
    ),
    document.getElementById('root') as HTMLElement
)

应用程序.tsx

const App: Component = () => {
    return (
        <>
            <Routes>
                <Route path="/" component={Landing} />
                <Route path="/dashboard" component={Dashboard} />
            </Routes>
        </>
    )
} …

父组件：

function ParentComponent() {
 return (
    <section>
      <ChildComponent ref={sectionRef} ref1={headerRef} />
    </section>
  );
} 

子组件：

function ChildComponent(props) {
return (
    <section ref={props.ref}>
      <article>
        <h2 ref={props.ref1}>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
          molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
          numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!</p>
      </article>
    </section>
  );
}

我的目标是能够从父组件中定位子组件中的不同 DOM 元素，以便我可以根据父组件的滚动事件为它们设置动画。

我尝试将引用作为不同的数据结构传递：

<ChildComponent ref={{sectionRef, headerRef}} />

和：

<ChildComponent ref={[sectionRef, headerRef]} />

和：

<ChildComponent section={sectionRef} header={headerRef} …

如何将Solid-JS 文档中的第一个示例转换为有效的打字稿？

import { render } from "solid-js/web"

const HelloMessage = props => <div>Hello {props.name}</div>

render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"))

我收到一个关于props没有类型提示的错误，特别是Parameter 'props' implicitly has an 'any' type.

对于 React，我会使用React.FC，但我找不到 Solid-JS 的等效项。

count在Solid中，为什么这个效果在更新时不会重新运行？经过一番修改后，我发现它与回调函数count中有关setTimeout，但是理解效果中的哪些内容被跟踪以及哪些内容不被跟踪的直观方法是什么？

function Counter() {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    setTimeout(() => {
      setCount(count() + 1);
    }, 1000);
  })

  return (
    <>
      {count()}
    </>
  );
}

我有一个 React 组件，其 prop 类型如下：

type Props = React.HTMLProps<HTMLAnchorElement> & {
    to?: string;
};

如何在 SolidJS 中编写等效的 prop 类型？我试过这个：

type Props = Component<HTMLAnchorElement> & {
    to?: string;
};

它可以编译，但它没有与前者相同的内置属性，例如children.

这是一个有问题的工作示例。我想将现有数组拼接到信号内，然后返回它以查看其更新。但这不起作用。如何简单地改变信号内的数组？我不想仅仅通过简单的拼接来创建新的数组。文档中没有关于改变数组的示例。

import {  render } from 'solid-js/web';
import { createSignal, createEffect } from 'solid-js'

function HelloWorld() {
  let [a, setA] = createSignal([])

  setTimeout(() => 
  setA(a => {
    a.splice(0, 0, 'hello')
    // this logs as requested if I uncomment this
    //return ['hello']
    return a
  }))


  createEffect(() => {
    console.log(a())
  })
  return <div>Hello World!</div>;
}

render(() => <HelloWorld />, document.getElementById('app'))

我有一个关于 SolidJS 的新手问题。我有一个包含对象的数组，例如待办事项列表。我将其呈现为一个列表，其中包含输入字段以编辑这些对象中的属性之一。当在其中一个输入字段中输入内容时，输入会直接失去焦点。

如何防止输入时失去焦点？

以下是演示该问题的 CodeSandbox 示例：https://codesandbox.io/s/6s8y2x ?file=/src/main.tsx

这是演示该问题的源代码：

import { render } from "solid-js/web";
import { createSignal, For } from 'solid-js'

function App() {
  const [todos, setTodos] = createSignal([
    { id: 1, text: 'cleanup' },
    { id: 2, text: 'groceries' },
  ])

  return (
    <div>
      <div>
        <h2>Todos</h2>
        <p>
          Problem: whilst typing in one of the input fields, they lose focus
        </p>
        <For each={todos()}>
          {(todo, index) => {
            console.log('render', index(), todo)
            return <div>
              <input
                value={todo.text}
                onInput={event => {
                  setTodos(todos …