能否通过HTML向renderToElementWithClassName渲染的组件传参？

这是个非常常见的实用需求——尤其是当组件需要在多个页面或场景复用，且每个场景需要不同配置的时候，用HTML的data-*属性传递参数是相当合适的方案。下面是具体的实现思路和代码示例：

实现步骤 #

1. 读取HTML元素的data属性值
   先定位到目标DOM元素，然后通过原生的dataset API读取对应的参数。比如你例子里的data-param，直接用element.dataset.param就能拿到值；如果怕参数不存在，还可以设置一个默认值兜底。

2. 把参数传入组件再渲染
   将读取到的参数传递给你的组件（比如<FAQ />），再调用renderToElementWithClassName完成渲染即可。

完整代码示例 #

// 找到目标DOM元素
const targetElement = document.querySelector('.class');

// 读取data属性值，没有的话用默认值
const paramValue = targetElement?.dataset.param || 'default-value';

// 渲染组件时传入参数
renderToElementWithClassName(<FAQ param={paramValue} />, "class");

扩展：处理多个组件实例 #

如果页面上有多个同类型组件（比如多个带.faq-box类的元素，每个都有不同的data-param），可以遍历所有元素逐个处理：

document.querySelectorAll('.faq-box').forEach(element => {
  // 读取当前元素的data参数
  const currentParam = element.dataset.param;
  // 渲染对应组件
  renderToElementWithClassName(<FAQ param={currentParam} />, element.classList[0]);
});

这样不管你在HTML里给哪个元素配置了data-*参数，组件都会自动读取对应的值，完全适配多场景复用的需求~

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