การเชื่อมตัวแปรและสตริงเข้าด้วยกันใน React

มีวิธีการรวมเครื่องหมายปีกกาของ React และhrefแท็กหรือไม่? สมมติว่าเรามีค่าต่อไปนี้ในรัฐ:

{this.state.id}

และแอตทริบิวต์ HTML ต่อไปนี้บนแท็ก:

href="#demo1"
id="demo1"

มีวิธีที่ฉันสามารถเพิ่มidรัฐลงในแอตทริบิวต์ HTML เพื่อรับสิ่งนี้หรือไม่:

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

ซึ่งจะให้:

#demo1

คุณเกือบถูกต้องเพียงใส่เครื่องหมายคำพูดไม่กี่คำ การห่อสิ่งต่าง ๆ ทั้งหมดด้วยเครื่องหมายคำพูดปกติจะให้สตริง#demo + {this.state.id}คุณ - คุณต้องระบุว่าอะไรคือตัวแปรและตัวใดเป็นสตริงตัวอักษร เนื่องจากทุกอย่างภายใน{}เป็นนิพจน์ JSX แบบอินไลน์คุณสามารถทำได้:

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

นี้จะใช้ตัวอักษรสตริงและเชื่อมไปยังค่าของ#demo this.state.idสิ่งนี้สามารถนำไปใช้กับสตริงทั้งหมด พิจารณาสิ่งนี้:

var text = "world";

และนี่:

{"Hello " + text + " Andrew"}

สิ่งนี้จะทำให้:

Hello world Andrew 

คุณสามารถใช้การแก้ไขสตริง ES6 / ตัวอักษรแม่แบบด้วย `(backticks) และ${expr}(นิพจน์ interpolated) ซึ่งใกล้เคียงกับสิ่งที่คุณพยายามทำ:

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

นี้โดยทั่วไปจะแทนค่าของthis.state.id, #demoเชื่อมโยงไปยัง มันเทียบเท่ากับการทำ: "#demo" + this.state.id.

วิธีที่ดีที่สุดในการ concat props / ตัวแปร:

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

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

ฉันขอแนะนำตัวอย่างที่สองมันเร็วกว่า