持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

Props

Props是一个在函数执行时传递进来的对象，且这个对象是只读的，不能修改，并且props对象也是一个响应式对象，这就意味做你不能使用解构，这样对失去它本身的响应式。但是为了解决这个问题，solidjs内置了一些工具函数帮助我们处理props。如mergeProps将潜在的响应式对象合并而不会失去响应式。

默认props

我们可以为组件设置默认的props，如：


import { mergeProps } from "solid-js";

export default function Greeting(props) {
  const merged = mergeProps({ greeting: "Hi", name: "John" }, props);

  return <h3>{merged.greeting} {merged.name}</h3>
}

分离Props

合并props并不是我们唯一要做的操作。我们大多数都需要使用解构一些props传递给子组件，为此，solid提供了splitProps。它接收一个props对象以及props对象的键数组，返回一个数组，数组第一个元素是与入参键数组对应的对象。数组中的最后一个元素会是一个未指定的键名的props对象，类似于剩余参数。如：

import { splitProps } from "solid-js";

export default function Greeting(props) {
  const [local, others] = splitProps(props, ["greeting", "name"]);
  return <h3 {...others}>{local.greeting} {local.name}</h3>
}

children

大多数情况下，你只需要将入参属性插入到jsx中，但是由于children元素可能会被重复创建，所以solid提供了children工具函数。此方法即会根据children访问创建memo缓存，还会处理任何嵌套的子级响应式引用，以便可以直接与children交互。

如：

import { createEffect, children } from "solid-js";

export default function ColoredList(props) {
  const c = children(() => props.children);
  createEffect(() => c().forEach(item => item.style.color = props.color));
  return <>{c()}</>
}

在示例中，我们有一个动态列表，我们希望设置它们的 color 样式属性。如果我们直接与 props.children 交互，不仅会多次创建节点，还会发现 children 本身是一个从 <For> 返回的 Memo 函数。

SolidJs之Props

Props

默认props

分离Props

children