mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
update
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "7a74e6c4aa1011a07330ddab",
|
||||
"source": "solid:signals",
|
||||
"type": "github-document",
|
||||
"title": "children",
|
||||
"content": "---\ntitle: children\nuse_cases: \u003e-\n resolving component children, normalizing JSX children, slot-like helpers,\n interacting with child content in library components\ntags:\n - components\n - children\n - jsx\n - utilities\nversion: \"1.0\"\ndescription: \u003e-\n Resolve and normalize a component's `children` prop into a stable accessor.\n Useful when you need to read or transform children imperatively inside a\n component.\n---\n\n`children` normalizes a component's `children` prop into a stable accessor that returns resolved JSX elements.\nIt accepts functions, arrays, fragments, and nested structures.\n\n## Import\n\n```ts\nimport { children } from \"solid-js\";\n```\n\n## Type\n\n```ts\nfunction children(fn: Accessor\u003cJSX.Element\u003e): ChildrenReturn;\n\ntype ChildrenReturn = Accessor\u003cResolvedChildren\u003e \u0026 {\n\ttoArray: () =\u003e ResolvedChildren[];\n};\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `() =\u003e JSX.Element`\n- **Required:** Yes\n\nAn accessor that returns the `children` value (typically `props.children`).\n\n## Return value\n\n- **Type:** `ChildrenReturn`\n\nThe function returns a callable accessor.\nCalling it yields the resolved children, either a single element or an array.\n\n## Helpers\n\n### `toArray()`\n\n- **Type:** `() =\u003e ResolvedChildren[]`\n\n- **Description:** Returns a flattened array of resolved child elements.\n\nThis method is exposed on the returned accessor and is useful for iteration or index-based logic.\n\n## Examples\n\n### Basic usage\n\n```tsx\nfunction Wrapper(props) {\n\tconst resolved = children(() =\u003e props.children);\n\n\treturn \u003cdiv\u003e{resolved()}\u003c/div\u003e;\n}\n\n// Usage\n\u003cWrapper\u003e\n\t\u003cspan\u003eone\u003c/span\u003e\n\t\u003cspan\u003etwo\u003c/span\u003e\n\u003c/Wrapper\u003e;\n```\n\n### `.toArray()` example\n\n```tsx\nfunction List(props) {\n\tconst resolved = children(() =\u003e props.children);\n\tconst items = resolved.toArray();\n\n\treturn (\n\t\t\u003cul\u003e\n\t\t\t{items.map((child) =\u003e (\n\t\t\t\t\u003cli\u003e{child}\u003c/li\u003e\n\t\t\t))}\n\t\t\u003c/ul\u003e\n\t);\n}\n\n// Usage\n\u003cList\u003e\n\t\u003cspan\u003eone\u003c/span\u003e\n\t\u003cspan\u003etwo\u003c/span\u003e\n\u003c/List\u003e;\n```\n\n\u003e [!NOTE]\n\u003e `children` resolves the current value of `props.children`.\n\u003e If `props.children` is reactive, the resolved accessor reflects updates.\n\n### Working with function-as-children\n\nIf `children` is a function, the helper evaluates it and returns its rendered result.\n\n```tsx\nfunction Slot(props) {\n\tconst resolved = children(() =\u003e props.children);\n\treturn \u003cdiv\u003e{resolved()}\u003c/div\u003e;\n}\n\n// Usage\n\u003cSlot\u003e{() =\u003e \u003cspan\u003edynamic\u003c/span\u003e}\u003c/Slot\u003e;\n```",
|
||||
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/children.mdx",
|
||||
"metadata": {
|
||||
"path": "src/routes/reference/component-apis/children.mdx",
|
||||
"repo": "solidjs/solid-docs",
|
||||
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
||||
"size": 2360,
|
||||
"source_type": "github"
|
||||
},
|
||||
"hash": "ec211c824d714d34956525702cf2e5c09325ae3e716d7594d978ec6f71091085",
|
||||
"timestamp": "2026-02-23T11:43:00.188612596+01:00"
|
||||
}
|
||||
Reference in New Issue
Block a user