在React中動態設置屬性鍵（例如data- {foo} =「bar」）

Question

如果您知道該鍵，則在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') 
); 

存在需要這種屬性的設置

Answer 1

你可以使用一個對象來存儲動態屬性，然後使用JSX傳播屬性庫（例如skrollr等）。

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> 
);