在 React 中动态设置属性键（例如 data-foo="bar"）

Posted 2023-02-22

【中文标题】在 React 中动态设置属性键（例如 data-foo="bar"）

【英文标题】：Dynamically set attribute key (e.g. data-foo="bar") in React在 React 中动态设置属性键（例如 data-foo="bar"）

【发布时间】：2021-12-30 14:49:32

【问题描述】：

如果你知道键，在 React 中设置属性很简单，例如

data-500=this.props.YDistance

但是如何动态设置密钥的一部分。例如

data-this.props.YDistance="valueHere"

var Test = React.createClass(

    render: function() 
        return (
            <div data-this.props.YDistance="valueHere">
                this.props.children
            </div>
        );
    

);

ReactDOM.render(
    <Test YDistance="500">Hello World!</Test>,
    document.getElementById('container')
);

有些库需要这种属性设置（例如skrollr 等）

【参考方案1】：

您可以使用对象来存储动态属性，然后使用 JSX 传播属性。

https://facebook.github.io/react/docs/jsx-spread.html

const propBag =  [`data-$foo`] = 'bar' ;
return (
  <div ...propBag>
     this.props.children
  </div>
);

那是使用 ES6 的 computed properties 特性以及 template literal strings。如果您不使用 ES6 功能，您可以像这样执行 ES5 实现：

var propBag = ;
propBag['data-' + foo] = 'bar';
return (
  <div ...propBag>
     this.props.children
  </div>
);

【讨论】：

这可以进一步简化为computed keys: <div ...['data-' + foo]: 'bar'>...</div>。

感谢@ctrlplusb - 很好的解决方案！小编辑...第一行应该是const propBag = [data-$foo] : 'bar' ; 吗？

没问题。 :) 这不是错字。查看我在代码示例下方提供的那些链接。它使用了一些神奇的 ES6 语法。别担心，这不是太神奇，如果你通过几个例子你会很快掌握它们。 :)

@EdWilliams 你是对的，但你甚至不需要方括号：const propBag = `data-$foo`: 'bar' ; 是一个有效的语法！

我将属性存储到对象中，然后使用扩展运算符，但它为 this.state.atributes 提供了意外的令牌问题