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

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

의 HTML5 속성을 렌더링하고 싶다.<select>jquery 이미지 피커를 react와 함께 사용할 수 있습니다.암호는 다음과 같습니다.

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>

자세한 내용은 JavaScript Expressions 문서를 참조하십시오.

참고 - 데이터 속성을 React 컴포넌트에 전달하려면 다른 소품과는 조금 다르게 처리해야 합니다.

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-Atribute는 특별히 취급됩니다.이 두 가지 경우 속성 이름에 하이픈을 사용할 수 있습니다.

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