Solid JS中能否基于配置动态命名并批量传递组件Props？

当然可以实现批量传递的需求，核心是要确保你传递给组件的是信号调用后的响应式值，而非信号本身。

基础实现调整 #

你当前的docs对象里存储的是createAsyncStore返回的信号函数，而组件ShowDocs期望接收的是信号解析后的实际值。只需要在构建docs对象时，调用每个信号来获取值即可：

import { render } from "solid-js/web";
import { Router, Route, createAsyncStore } from "@solidjs/router";

let ShowDocs = props => (
  <p>
    doc1: {props.doc1.a} <br/>
    doc2: {props.doc2.a} <br/>
    doc3: {props.doc3.a} <br/>
  </p>
);

let Main = props => {
    const docs = {};
    for (let i=1; i<=3; i++) {
        // 创建信号后立即调用，将响应式值存入docs
        const docSignal = createAsyncStore(() => ({a:'blah'}));
        docs[`doc${i}`] = docSignal();
    }

    return (
        <div>
            {/* 现在可以直接批量传递 */}
            <ShowDocs {...docs} />
        </div>
    );
}

render(() => <Router><Route path="/*" component={Main} /></Router>, document.getElementById("app")!);

动态配置场景优化 #

如果属性数量或名称来自外部配置文件，用createMemo生成响应式props对象，能确保配置变化时自动更新组件：

import { render, createMemo } from "solid-js/web";
import { Router, Route, createAsyncStore } from "@solidjs/router";

// 模拟外部配置文件的内容
const docConfig = ['doc1', 'doc2', 'doc3'];

let ShowDocs = props => (
  <p>
    {docConfig.map(key => (
      <>{key}: {props[key].a} <br/></>
    ))}
  </p>
);

let Main = props => {
    // 用createMemo生成响应式props对象
    const docsProps = createMemo(() => {
        const props = {};
        for (const key of docConfig) {
            const docSignal = createAsyncStore(() => ({a:'blah'}));
            props[key] = docSignal();
        }
        return props;
    });

    return (
        <div>
            <ShowDocs {...docsProps()} />
        </div>
    );
}

render(() => <Router><Route path="/*" component={Main} /></Router>, document.getElementById("app")!);

关键原理 #

Solid的JSX会自动追踪响应式依赖，只要你传递的是信号调用后的结果（signal()），组件就能在信号值更新时自动重新渲染。展开运算符{...obj}在这里和普通JSX属性传递逻辑一致，只要对象属性是响应式值，就能正常工作。

内容的提问来源于stack exchange，提问作者user527388