如何将JS变量作为HTML属性名使用，生成符合预期的DOM元素？

解决方案 #

你可以通过对象属性扩展的方式实现动态属性名绑定，修改后的代码如下：

const loremIpsum = (dolor) => {
  const attribute = "data-" + dolor;
  // 把动态属性封装为对象后通过扩展运算符挂载到标签
  const domElement = <p {...{ [attribute]: dolor }}> Result {dolor}</p>;

  return domElement;
};

原理说明 #

JSX 原生不支持直接用变量作为属性名的写法，你需要先将动态属性名和对应值定义为对象的键值对（这里用到了ES6的计算属性名语法定义对象键），再通过...扩展运算符把整个对象的所有属性挂载到目标标签上。调用loremIpsum("foo")时即可生成你预期的<p data-foo="foo"> Result foo </p>结构。

如果想要代码可读性更高，也可以单独定义属性对象：

const loremIpsum = (dolor) => {
  const dynamicAttrs = {
    ["data-" + dolor]: dolor
  };
  const domElement = <p {...dynamicAttrs}> Result {dolor}</p>;

  return domElement;
};

内容的提问来源于stack exchange，提问作者Charles-Olivier Racine