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

IT技术 javascript reactjs skrollr
2021-05-04 08:58:36

如果您知道密钥，则在 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的计算属性功能以及模板文字字符串。如果你不使用 ES6 特性，你可以像这样执行 ES5 实现：

var propBag = {};
propBag['data-' + foo] = 'bar';
return (
  <div {...propBag}>
     {this.props.children}
  </div>
);
其它你可能感兴趣的问题
上一篇立方体边缘被压扁了？ 下一篇奇怪的表面东西