动态组件渲染
编辑此页面<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"