React를 사용하여 HTML5 데이터 속성을 어떻게 동적으로 설정합니까?

React를 사용하여 HTML5 데이터 속성을 어떻게 동적으로 설정합니까?

---

<select>반응과 함께 jquery 이미지 선택기를 사용할 수 있도록 입력 의 HTML5 속성을 사용하고 싶습니다 . 내 코드는 다음과 달라집니다.

var Book = React.createClass({
    render: function() {
        return (
            <option data-img-src="{this.props.imageUrl}" value="1">{this.props.title}</option>

는으로 문제 {this.props.imageUrl}올바르게 전달되지만 propHTML로 렌더링되지 않고 {this.props.imageUrl}. 변수가 HTML로 전달되어야합니까?

---

JavaScript는 묶어서 따옴표로 묶습니다.

<option data-img-src={this.props.imageUrl} value="1">{this.props.title}</option>

한 번 봐 가지고있는 도구 문서 추가 정보를 원합니다.

---

참고-데이터 속성을 React Component에 전달한 다른 props와 약간 다르게 처리해야합니다.

2 가지 옵션

카멜 케이스를 사용하지 않고

<Option data-img-src='value' ... />

그런 다음 구성 요소에서 대시로 따옴표로 소품을 참조해야합니다.

// @flow
class Option extends React.Component {

  props: {
    'data-img-src': string
  }

나중에 참조 할 때 점 구문을 사용하지 않습니다.

  render () {
    return (
      <option data-img-src={this.props['data-img-src']} >...</option>
    )
  }
}

또는 낙타 케이스 사용

<Option dataImgSrc='value' ... />

그런 다음 구성 요소에서 변환해야합니다.

// @flow
class Option extends React.Component {

  props: {
    dataImgSrc: string
  }

나중에 참조 할 때 점 구문을 사용하지 않습니다.

  render () {
    return (
      <option data-img-src={this.props.dataImgSrc} >...</option>
    )
  }
}

주로 data-속성과 aria-속성이 특유 취급하는 것 입니다. 이 두 가지 경우 속성 이름에 하이픈을 사용할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/27285856/how-do-i-dynamically-set-html5-data-attributes-using-react