Solid JS中如何将父组件类名合并到子组件根元素

问题场景 #

我需要实现父组件给子组件的根元素追加类名，示例代码如下：

const A = () => {
  return <div class="a">whatever</div>
}
const B = () => {
  return <A class="b" />
}
// 期望<B />渲染为 <div class="a b">whatever</div>

但直接给组件A传class属性不会生效。如果是自己编写的组件，可以通过接收props合并类名解决：

const A = (props) => {
  return <div class={`a ${props.class || ''}`}>whatever</div>
}

但如果A是第三方库组件无法修改，该怎么处理？我想实现类似这样的工具函数：

const classesForwarder = (component) => (props) => { /* 实现逻辑 */ }
const B = classesForwarder(() => <A class="b" />)

解决方案 #

在Solid JS中，可以利用@solidjs/core提供的children、unwrap和mergeProps工具来实现类名的转发和合并：

实现classesForwarder工具函数 #

import { children, unwrap, mergeProps } from "solid-js";

const classesForwarder = (Component) => (props) => {
  const child = children(() => Component(props));
  return unwrap(child).map((el) => {
    // 合并原有类名和传入的类名
    const mergedClass = el.props.class 
      ? `${el.props.class} ${props.class}` 
      : props.class;
    // 返回修改后的元素
    return {
      ...el,
      props: mergeProps(el.props, { class: mergedClass })
    };
  });
};

使用方式 #

const A = () => {
  return <div class="a">whatever</div>
};

// 直接调用方式
const B = () => {
  return classesForwarder((props) => <A {...props} />)({ class: "b" });
};

// 封装为转发组件后调用（更推荐）
const ForwardedA = classesForwarder((props) => <A {...props} />);
const C = () => <ForwardedA class="c" />;

说明 #

• children用于获取组件渲染出的根元素
• unwrap用于解析Solid的响应式children，获取真实的元素节点
• mergeProps用于安全合并元素的props，避免直接覆盖原有属性
• 该方案仅适用于子组件渲染单一根元素的情况，如果子组件有多个根元素，可根据需求调整逻辑（比如给所有根元素追加类名，或指定特定元素）

内容的提问来源于stack exchange，提问作者v-moe