प्रतिक्रिया में परिवर्तनशील चर और तार

Question

क्या रिएक्ट के घुंघराले ब्रेस नोटेशन और एक hrefटैग को शामिल करने का कोई तरीका है ? कहें कि हमारे पास राज्य में निम्नलिखित मूल्य हैं:

{this.state.id}

और एक टैग पर निम्नलिखित HTML विशेषताएँ:

href="#demo1"
id="demo1"

क्या कोई ऐसा तरीका है जिससे मैं idHTML विशेषता के लिए कुछ इस तरह से जोड़ सकता हूं :

href={"#demo + {this.state.id}"}

जो उपज देगा:

#demo1

Answer 1

आप लगभग सही हैं, बस कुछ उद्धरण गलत हैं। पूरी चीज़ों को नियमित उद्धरण में लपेटना शाब्दिक रूप से आपको स्ट्रिंग देगा #demo + {this.state.id}- आपको यह इंगित करने की आवश्यकता है कि कौन से चर हैं और कौन से स्ट्रिंग शाब्दिक हैं। चूंकि अंदर कुछ भी {}एक इनलाइन JSX अभिव्यक्ति है , आप कर सकते हैं:

href={"#demo" + this.state.id}

यह स्ट्रिंग शाब्दिक का उपयोग करेगा #demoऔर इसे के मान तक पहुंचाएगा this.state.id। यह फिर सभी तारों पर लागू किया जा सकता है। इस पर विचार करो:

var text = "world";

और इस:

{"Hello " + text + " Andrew"}

इससे उपज होगी:

Hello world Andrew 

आप ES6 स्ट्रिंग इंटरपोलेशन / टेम्प्लेट शाब्दिक का उपयोग `(बैकटिक्स) और ${expr}(इंटरपोलेटेड एक्सप्रेशन) के साथ भी कर सकते हैं , जो कि आप जो करने की कोशिश कर रहे हैं, उसके करीब है:

href={`#demo${this.state.id}`}

यह मूल रूप से this.state.id, के मान को प्रतिस्थापित करेगा #demo। यह करने के बराबर है "#demo" + this.state.id:।

Comments

पहले को लागू करते हुए, एस्लिंट ने आपके दूसरे को लागू करने का सुझाव दिया, स्ट्रिंग शाब्दिक टेम्पलेट्स का उपयोग करें। eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy हाँ, आपको करना चाहिए। ES2015 (जिसे टेम्प्लेट पेश किया गया था) अभी व्यापक रूप से अपनाना शुरू कर रहा था। आजकल, टेम्पलेट शाब्दिक हैं।

— एंड्रयू ली

Answer 2

सहारा / चर को समाप्‍त करने का सबसे अच्‍छा तरीका:

var sample = "test";    
var result = `this is just a ${sample}`;    
//this is just a test

Answer 3

exampleData =

        const json1 = [
            {id: 1, test: 1},
            {id: 2, test: 2},
            {id: 3, test: 3},
            {id: 4, test: 4},
            {id: 5, test: 5}
        ];

        const json2 = [
            {id: 3, test: 6},
            {id: 4, test: 7},
            {id: 5, test: 8},
            {id: 6, test: 9},
            {id: 7, test: 10}
        ];

example1 =

        const finalData1 = json1.concat(json2).reduce(function (index, obj) {
            index[obj.id] = Object.assign({}, obj, index[obj.id]);
            return index;
        }, []).filter(function (res, obj) {
            return obj;
        });

example2 =

        let hashData = new Map();

        json1.concat(json2).forEach(function (obj) {
            hashData.set(obj.id, Object.assign(hashData.get(obj.id) || {}, obj))
        });

        const finalData2 = Array.from(hashData.values());

मैं दूसरा उदाहरण सुझाता हूं, यह तेज है।