প্রতিক্রিয়াতে ভেরিয়েবল এবং স্ট্রিংগুলিকে সংমিশ্রণ করা

Question

প্রতিক্রিয়াটির কোঁকড়ানো ধনুর্বন্ধনী স্বরলিপি এবং একটি hrefট্যাগ অন্তর্ভুক্ত করার জন্য কি কোনও উপায় আছে ? বলুন আমাদের রাজ্যে নিম্নলিখিত মান রয়েছে:

{this.state.id}

এবং একটি ট্যাগে নিম্নলিখিত এইচটিএমএল বৈশিষ্ট্য:

href="#demo1"
id="demo1"

এই idজাতীয় কিছু পাওয়ার জন্য কি এই উপায়টি এইচটিএমএল বৈশিষ্ট্যের সাথে আমি যুক্ত করতে পারি?

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

যা ফল দেবে:

#demo1

Answer 1

আপনি প্রায় সঠিক, মাত্র কয়েকটি উদ্ধৃতি ভুল জায়গায় রেখেছেন। নিয়মিত উদ্ধৃতিতে পুরো জিনিসটি মুছলে আক্ষরিক অর্থে আপনি স্ট্রিংটি দেবেন #demo + {this.state.id}- আপনাকে চিহ্নিত করতে হবে কোনটি ভেরিয়েবল এবং কোনটি স্ট্রিং আক্ষরিক । যেহেতু ভিতরে {}থাকা কোনও কিছুই একটি ইনলাইন জেএসএক্স এক্সপ্রেশন , তাই আপনি এটি করতে পারেন:

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());

আমি দ্বিতীয় উদাহরণ সুপারিশ, এটি দ্রুত।