组件开发 - SolidJS 文档

🧩 基本组件

jsx

// 函数组件
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用
<Greeting name="World" />

                            💡 与 React 的区别
                            组件只执行一次（无重渲染）
Props 是响应式的（函数形式）
无 useEffect、useState 等

                        

📋 Props

jsx

import { splitProps } from 'solid-js';

function Button(props) {
  // 分离属性
  const [local, others] = splitProps(props, ['class', 'children']);
  
  return (
    <button 
      class={`btn ${local.class || ''}`}
      {...others}
    >
      {local.children}
    </button>
  );
}

// 使用
<Button class="primary" onClick={handleClick}>
  Click me
</Button>

默认 Props

jsx

function Card(props) {
  return (
    <div class="card">
      <h2>{props.title || 'Untitled'}</h2>
      <p>{props.description}</p>
    </div>
  );
}

// 或者使用 mergeProps
import { mergeProps } from 'solid-js';

function Card(props) {
  const merged = mergeProps({ title: 'Untitled' }, props);
  return <h2>{merged.title}</h2>;
}

🔄 控制流

Show - 条件渲染

jsx

import { Show } from 'solid-js';

function Profile({ user }) {
  return (
    <div>
      <Show 
        when={user()} 
        fallback={<p>Loading...</p>}
      >
        {(userData) => (
          <h1>Hello, {userData.name}!</h1>
        )}
      </Show>
    </div>
  );
}

For - 列表渲染

jsx

import { For } from 'solid-js';

function TodoList({ todos }) {
  return (
    <ul>
      <For each={todos()}>
        {(todo, index) => (
          <li>
            {index()}. {todo.text}
            <button onClick={() => remove(todo.id)}>
              Delete
            </button>
          </li>
        )}
      </For>
    </ul>
  );
}

Switch/Match - 多条件

jsx

import { Switch, Match } from 'solid-js';

function Status({ status }) {
  return (
    <Switch fallback={<p>Unknown status</p>}>
      <Match when={status() === 'loading'}>
        <p>Loading...</p>
      </Match>
      <Match when={status() === 'error'}>
        <p>Error!</p>
      </Match>
      <Match when={status() === 'success'}>
        <p>Success!</p>
      </Match>
    </Switch>
  );
}

⏳ 生命周期

SolidJS 没有 React 的生命周期方法，使用 onMount 和 onCleanup：

jsx

import { onMount, onCleanup } from 'solid-js';

function Timer() {
  let interval;
  
  onMount(() => {
    console.log('Component mounted');
    interval = setInterval(() => {
      console.log('Tick');
    }, 1000);
  });
  
  onCleanup(() => {
    console.log('Component unmounted');
    clearInterval(interval);
  });
  
  return <div>Timer running...</div>;
}

🎭 Portal

jsx

import { Portal } from 'solid-js/web';

function Modal(props) {
  return (
    <Portal mount={document.getElementById('modal-root')}>
      <div class="modal-overlay">
        <div class="modal-content">
          {props.children}
        </div>
      </div>
    </Portal>
  );
}

⚠️ Error Boundary

jsx

import { ErrorBoundary } from 'solid-js';

function App() {
  return (
    <ErrorBoundary 
      fallback={(err, reset) => (
        <div>
          <p>Error: {err.message}</p>
          <button onClick={reset}>Retry</button>
        </div>
      )}
    >
      <MyComponent />
    </ErrorBoundary>
  );
}