Các biến và chuỗi kết hợp trong React

155

Có cách nào để kết hợp ký hiệu dấu ngoặc nhọn của React và hrefthẻ không? Nói rằng chúng ta có giá trị sau trong trạng thái:

{this.state.id}

và các thuộc tính HTML sau trên thẻ:

href="#demo1"
id="demo1"

Có cách nào để tôi có thể thêm idtrạng thái vào thuộc tính HTML để có được cái gì đó như thế này không:

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

Sẽ mang lại:

#demo1

— mất9123193
nguồn

320

Bạn gần như đúng, chỉ cần đặt sai một vài trích dẫn. Việc gói toàn bộ nội dung trong các trích dẫn thông thường sẽ cung cấp cho bạn chuỗi #demo + {this.state.id}- bạn cần chỉ ra đâu là biến số và chuỗi ký tự nào. Vì bất cứ điều gì bên trong {}là một biểu thức JSX nội tuyến , bạn có thể làm:

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

Điều này sẽ sử dụng chuỗi ký tự #demovà nối nó với giá trị của this.state.id. Điều này sau đó có thể được áp dụng cho tất cả các chuỗi. Xem xét điều này:

var text = "world";

Và điều này:

{"Hello " + text + " Andrew"}

Điều này sẽ mang lại:

Hello world Andrew

Bạn cũng có thể sử dụng phép nội suy chuỗi / mẫu ES6 với `(backticks) và ${expr}(biểu thức nội suy), gần với những gì bạn dường như đang cố gắng thực hiện:

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

Điều này về cơ bản sẽ thay thế giá trị của this.state.id, nối nó với #demo. Nó tương đương với làm : "#demo" + this.state.id.

— Andrew Li
nguồn

Thực hiện lần đầu tiên, eslint đề nghị thực hiện lần thứ hai của bạn, sử dụng các mẫu bằng chữ. eslint.org/docs/rules/prefer-template

— w00ngy

@ w00ngy Vâng, bạn nên. ES2015 (đã giới thiệu các mẫu) mới bắt đầu được áp dụng rộng rãi. Ngày nay, mẫu chữ là đi đến.

— Andrew Li

38

cách tốt nhất để nối các đạo cụ / biến:

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

— Kevin Laurente
nguồn

0

ví dụData =

        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}
        ];

ví dụ1 =


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

ví dụ2 =

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

Tôi đề nghị ví dụ thứ hai, nó nhanh hơn.

— Yunus ER
nguồn