फंक्शन रेंडर फंक्शन में डायनामिक href कैसे बनाएं?


105

मैं पदों की एक सूची प्रदान कर रहा हूं। प्रत्येक पोस्ट के लिए मैं href स्ट्रिंग के हिस्से के रूप में पोस्ट आईडी के साथ एक एंकर टैग प्रदान करना चाहूंगा।

render: function(){
    return (
        <ul>
            {
                this.props.posts.map(function(post){
                    return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li>
                })
            }
        </ul>
    );

मैं इसे कैसे है कि प्रत्येक पोस्ट के href की है तो क्या करते हो /posts/1, /posts/2आदि?

जवाबों:


192

स्ट्रिंग संघनन का उपयोग करें:

href={'/posts/' + post.id}

JSX सिंटैक्स या तो स्ट्रिंग या भाव ({...})को मान के रूप में उपयोग करने की अनुमति देता है। आप दोनों को मिला नहीं सकते। एक अभिव्यक्ति के अंदर, जैसा कि नाम से पता चलता है, मूल्य की गणना करने के लिए किसी भी जावास्क्रिप्ट अभिव्यक्ति का उपयोग करें।


1
बहुत ही समझदार। धन्यवाद!
कॉनर लिच

1
महान काम करता है, लेकिन यदि आप कोलाहल जैसे संकलक का उपयोग कर रहे हैं, तो टेम्पलेट स्ट्रिंग अधिक सुरुचिपूर्ण हैं।
हुसैनक सिप

क्या होगा अगर इसका एक मेलआउट?
लोंगगोरतदा

@tallgirltaadaa: कोई अंतर नहीं। JSX / जावास्क्रिप्ट स्ट्रिंग के वास्तविक मूल्य के बारे में परवाह नहीं करता है।
फेलिक्स क्लिंग

87

आप ES6 बैकटिक सिंटैक्स का भी उपयोग कर सकते हैं

<a href={`/customer/${item._id}`} >{item.get('firstName')} {item.get('lastName')}</a>

Es6 टेम्पलेट शाब्दिक पर अधिक जानकारी


काम करने के लिए यह `और नहीं 'का उपयोग करने के लिए आवश्यक है?
जो लॉयड

3
हाँ बैकटिक स्ट्रिंग प्रक्षेप के लिए एक नया es6 वाक्यविन्यास है, एक लिंक के साथ मेरे उत्तर को अपडेट करें
Nath

2

फेलिक्स के जवाब के अलावा,

href={`/posts/${posts.id}`}

अच्छा भी काम करेगा। यह अच्छा है क्योंकि यह एक स्ट्रिंग में है।


0

क्या आप यह कोशिश कर सकते हैं?

पोस्ट में एक और आइटम बनाएं जैसे कि पोस्ट.लिंक तब रेंडर फ़ंक्शन को पोस्ट भेजने से पहले लिंक को असाइन करें ।

post.link = '/posts/+ id.toString();

इसलिए, उपरोक्त रेंडर फ़ंक्शन इसके बजाय निम्नलिखित होना चाहिए।

return <li key={post.id}><a href={post.link}>{post.title}</a></li>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.