7

Tôi gặp lỗi prefer-template từ eslint. Đối với cách giải quyết, tôi đã thay đổi mã của tôi để sử dụng một mẫu chuỗi bên trong require chức năng mà được lồng bên trong url chức năng như sau:Làm thế nào để lồng chuỗi mẫu trong ES6?

{ 
    background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png` center no-repeat`)}) 
} 

Tuy nhiên, đó đã là một lỗi, rõ ràng. Đây là mã tôi đã sử dụng trước đây, một dấu cộng nối vào bên trong hàm require thay vì chuỗi mẫu.

{ 
    background: `url(${require('../../assets/' + edge.node.name.toLowerCase() + '.png')}) center no-repeat` 
} 

Có thể xác định chuỗi mẫu lồng nhau không?

Trả lời

12

Có, đó là có thể, nhưng bạn phải vì một lý do đặt phần )}) (mà đóng require cuộc gọi, giá trị nội suy, và CSS url) tại địa điểm sai:

{ 
    background: `url(${require(`../../assets/${edge.node.name.toLowerCase()}.png`)}) center no-repeat` 
//                    ^^^ 
} 

Điều đó nói rằng, nó có thể là một ý tưởng tồi vì nó không chính xác làm cho mã có thể đọc được. Sử dụng biến tốt hơn:

const bgurl = require(`../../assets/${edge.node.name.toLowerCase()}.png`); 
… { 
    background: `url(${bgurl}) center no-repeat` 
} 
+0

Cảm ơn phản hồi của bạn. Đó là sai lầm của tôi cho bản demo. Tuy nhiên, khi tôi thay đổi nó thành 'url ($ {require (' ../../ assets/$ {edge.node.name.toLowerCase()}. Png')) không lặp lại trung tâm' Đó là lỗi cú pháp. – lvarayut

+0

@LVarayut: [Worksforme] (http://babeljs.io/repl/#?evaluate=true&presets=es2015&code=const%20x%20%3D%20 {% 0A% 20% 20background% 3A% 20% 60url% 28 % 24 {yêu cầu% 28% 60 ..% 2F ..% 2Fassets% 2F% 24 {edge.node.name.toLowerCase% 28% 29} .png% 60% 29}% 29% 20center% 20no-repeat% 60 % 0A}% 3B). Bạn đang gặp lỗi gì? – Bergi

+0

Cảm ơn @Bergi. Là sự nhầm lẫn của tôi về dấu ngoặc nhọn. BTW, tôi sẽ đi với cách tiếp cận thứ hai của bạn. – lvarayut

Các vấn đề liên quan