Reactクラスに渡された 'data-'小道具の使い方は？

Question

は私の呼び出しJSXコンポーネントで次を考える：

<CoolThing data-itemx="Corduroy" data-itemy="Pancakes" />

私は私のCoolThingクラスでこれらの文字列を使用することができるようにしたいです。

class CoolThing extends Component { 
    getStyle() { 
    var itemx = this.props.data-itemx; 
    var itemy = this.props.data-itemy; 

これは、データ文字列の代わりにNaNを生成します。私はいくつか他のものを試してみた：console.log(this.props)を実行

this.props.dataItemx // undefined 
    this.props.dataitemx // undefined 
    this.props.itemx  // undefined 
    this.props.data.itemx // error accessing itemx of undefined 

はdata-itemxが存在することを示しているが、私はそれにアクセスすることはできません。

私は既にhttps://facebook.github.io/react/docs/dom-elements.htmlを読んでいますが、この作業を行う方法はまだ分かりません。

どうやってこれを行うのですか？ brackets表記法を使用した

Answer 1

のアクセスには、ドット表記は-

class CoolThing extends Component { 
    getStyle() { 
    var itemx = this.props['data-itemx']; 
    var itemy = this.props['data-itemy']; 

スニペットでは動作しません：

class CoolThing extends React.Component { 
 
    render() { 
 
    console.log(this.props['data-itemx']); 
 
    return (
 
     <div>Hello World</div> 
 
    ) 
 
    } 
 
} 
 
ReactDOM.render(<CoolThing data-itemx="4324"/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 2

Propsがオブジェクトである、あなたはキーで小道の値を渡す：data-itemx、data-i temy

これらの値は正確に同じ名前で使用でき、値にアクセスするには角かっこ[]を使用します。このように：

class CoolThing extends Component { 
    getStyle() { 
     var itemx = this.props['data-itemx']; 
     var itemy = this.props['data-itemy']; 
     console.log(itemx, itemy); 
     .... 

提案：私はあなたが使用しないことをお勧めします - プロパティ名でを、dataItemxとdataItemyの代わりdata-itemx, data-itemyを使用しています。

チェックこのスニペット：

var App = (props) => { 
 
    console.log(props['a-b']) 
 
    return <p>Hello</p> 
 
} 
 

 
ReactDOM.render(<App a-b='a'/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>