मैं प्रतिक्रियाशीलता का उपयोग कर एचटीएमएल 5 डेटा-विशेषताएं कैसे गतिशील रूप से सेट करूं?

Question

मैं <select> इनपुट की एक HTML5 विशेषता प्रस्तुत करना चाहता हूं ताकि मैं प्रतिक्रिया के साथ jquery image picker का उपयोग कर सकूं। मेरे कोड है:

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

मुद्दा यह है कि भले ही {this.props.imageUrl} ठीक से एक prop के रूप में पारित हो रही है है, यह HTML में प्रस्तुत नहीं हो रही है - यह बस {this.props.imageUrl} के रूप में बना देता है। मैं चरम सीमा को HTML में ठीक से कैसे बना सकता हूं?

Answer 1

आपको उद्धरणों में जावास्क्रिप्ट अभिव्यक्तियों को लपेटना नहीं चाहिए।

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

अधिक जानकारी के लिए the JavaScript Expressions docs पर एक नज़र डालें।

Answer 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> 
    ) 
    } 
}