Reactive Utilities

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
}

报告此页面问题