splitProps
编辑此页面import { splitProps } from "solid-js"
function splitProps<T>( props: T, ...keys: Array<(keyof T)[]>): [...parts: Partial<T>]
按键拆分响应式对象。
它接收一个响应式对象和任意数量的键数组;对于每个键数组,它将返回一个只包含原始对象这些属性的响应式对象。 返回数组中的最后一个响应式对象将包含原始对象的任何剩余属性。
如果你想使用 props 的一部分并将其余部分传递给子组件,这个功能会很有用。
function MyComponent(props) { const [local, others] = splitProps(props, ["children"])
return ( <> <div>{local.children}</div> <Child {...others} /> </> )}
因为 splitProps
可以接收任意数量的数组,我们可以根据需要拆分 props 对象(例如,如果我们有多个子组件,每个子组件都需要 props 的一个子集)。
假设一个组件接收了六个 props:
;<MyComponent a={1} b={2} c={3} d={4} e={5} foo="bar" />// ...
function MyComponent(props) { console.log(props) // {a: 1, b: 2, c: 3, d: 4, e: 5, foo: "bar"} const [vowels, consonants, leftovers] = splitProps( props, ["a", "e"], ["b", "c", "d"] ) console.log(vowels) // {a: 1, e: 5} console.log(consonants) // {b: 2, c: 3, d: 4} console.log(leftovers.foo) // bar}