React中如何将Props传递给HTML属性并合并生成单个DOM元素

问题说明 #

在React开发中，需要将多个自定义data属性（如data-scroll、data-scroll-direction等）传递给单个div元素，但现有代码通过map循环生成了多个div，每个仅包含一个data属性，不符合需求。

现有代码 #

import React from "react";

export const AnimationParams = ({ children, animationparams }) => {
  animationparams;
  const number = animationparams.Parameters;
  const table = [...Array(number)];

  return table.map((_, index) => {
    const row = `Parameters_${index}_name`;
    const anchor = `Parameters_${index}_value`;

    return (
      <React.Fragment key={row}>
        <div
          className="animation"
          {...{ [animationparams[row]]: animationparams[anchor] }}
        >
          {children}
        </div>
      </React.Fragment>
    );
  });
};

当前HTML输出 #

<div>
<div class="animation" data-scroll="">
<h1 class="font-heading max-w-5xl mx-auto my-5 text-6xl ">To jest heading z acf/hero</h1>
</div>
<div class="animation" data-scroll-direction="horizontal">
<h1 class="font-heading max-w-5xl mx-auto my-5 text-6xl ">To jest heading z acf/hero</h1>
</div>
<div class="animation" data-scroll-speed="11">
<h1 class="font-heading max-w-5xl mx-auto my-5 text-6xl ">To jest heading z acf/hero</h1>
</div>
</div>

期望HTML输出 #

<div>
<div class="animation" data-scroll data-scroll-direction="horizontal" data-scroll-speed="11">
<h1 class="font-heading max-w-5xl mx-auto my-5 text-6xl ">To jest heading z acf/hero</h1>
</div>
</div>

animationparams数据 #

{
    "heading": "To jest heading z acf/hero",
    "_heading": "field_638a71fabc28a",
    "Parameters_0_name": "data-scroll",
    "_Parameters_0_name": "field_638b5c2392a98",
    "Parameters_0_value": "",
    "_Parameters_0_value": "field_638b5c2b92a99",
    "Parameters_1_name": "data-scroll-direction",
    "_Parameters_1_name": "field_638b5c2392a98",
    "Parameters_1_value": "horizontal",
    "_Parameters_1_value": "field_638b5c2b92a99",
    "Parameters_2_name": "data-scroll-speed",
    "_Parameters_2_name": "field_638b5c2392a98",
    "Parameters_2_value": "11",
    "_Parameters_2_value": "field_638b5c2b92a99",
    "Parameters": 3,
    "_Parameters": "field_638a7b858076a"
}

解决方案 #

核心思路是先遍历参数，将所有data属性整合到一个对象中，再在单个div上展开这个对象。同时处理空值属性，让data-scroll=""渲染为data-scroll：

import React from "react";

export const AnimationParams = ({ children, animationparams }) => {
  const paramCount = animationparams.Parameters;
  const dataAttributes = {};

  for (let index = 0; index < paramCount; index++) {
    const attrName = animationparams[`Parameters_${index}_name`];
    const attrValue = animationparams[`Parameters_${index}_value`];
    // 空值转换为true，React会渲染为无值的属性（如data-scroll）
    dataAttributes[attrName] = attrValue === "" ? true : attrValue;
  }

  return (
    <div className="animation" {...dataAttributes}>
      {children}
    </div>
  );
};

说明 #

• 不再用map生成多个div，而是通过循环构建完整的属性对象
• 对空值属性做特殊处理，符合HTML中布尔属性的渲染规范
• 单个div展开所有属性，最终输出符合期望的结构

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