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가 생성됩니다.

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

이 console.log(this.props)이 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'/>