如果你知道键,在 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 等)
可以使用对象来存储动态属性,然后使用 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>
);