Control Flow

动态组件渲染

<Dynamic> 是一个 Solid 组件，允许您根据数据动态渲染组件。通过将表示原生 HTML 元素的字符串或组件函数传递给 component 属性，您可以选择最终要渲染的组件。

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

const RedDiv = () => <div style="color: red">Red</div>;
const GreenDiv = () => <div style="color: green">Green</div>;
const BlueDiv = () => <div style="color: blue">Blue</div>;

const options = {
  red: RedDiv,
  green: GreenDiv,
  blue: BlueDiv,
};

function App() {
  const [selected, setSelected] = createSignal("red");

  return (
    <>
      <select
        value={selected()}
        onInput={(e) => setSelected(e.currentTarget.value)}
      >
        <For each={Object.keys(options)}>
          {(color) => <option value={color}>{color}</option>}
        </For>
      </select>
      <Dynamic component={options[selected()]} />
    </>
  );
}

这个例子渲染了一个 <select> 元素，允许您在三种颜色之间进行选择。一旦选择了颜色，<Dynamic> 组件将渲染所选颜色的对应组件或元素。

<Dynamic> 比其他条件渲染拥有更简洁的代码。例如，以下代码渲染的结果与前面的示例相同：

import { createSignal, Switch, Match, For } from "solid-js";

const RedDiv = () => <div style="color: red">Red</div>;
const GreenDiv = () => <div style="color: green">Green</div>;
const BlueDiv = () => <div style="color: blue">Blue</div>;

const options = {
  red: RedDiv,
  green: GreenDiv,
  blue: BlueDiv,
};

function App() {
  const [selected, setSelected] = createSignal("red");

  return (
    <>
      <select
        value={selected()}
        onInput={(e) => setSelected(e.currentTarget.value)}
      >
        <For each={Object.keys(options)}>
          {(color) => <option value={color}>{color}</option>}
        </For>
      </select>
      <Switch fallback={<BlueDiv />}>
        <Match when={selected() === "red"}>
          <RedDiv />
        </Match>
        <Match when={selected() === "green"}>
          <GreenDiv />
        </Match>
      </Switch>
    </>
  );
}

<Dynamic> 提供了一种更简洁的动态渲染组件的方式，而不是更详细的 <Switch> 和 <Match> 语句。

Props

使用这些组件时，您可以通过将 props 传递给 <Dynamic> 组件来将它们传递给正在渲染的组件，类似于在 JSX 中将 props 传递给组件的方式。

import { Dynamic } from "solid-js/web";

function App() {
  return <Dynamic component={someComponent} someProp="someValue" />;
}

译者注：也就是说，在这个例子中，someComponent 中的组件可以访问到 someProp="someValue"

报告此页面问题