React ile İzomorfik Bir Projeye Koşullu Script Eklemek
Bazen kolay diye düşündüğümüz şeyler başlangıçta düşünülenden daha karmaşık görünür. Örneğin, bugün yazdığım bir koda eklemek zorunda olduğum IE koşullu script. Sadece internet explorer’da çalışacak bir javascript olan html5Shiv’i bilmeyeniniz yoktur. Html5 özelliklerini internet explorer’da da kullanabilmek için bu scripti sadece ie’de çalışacak şekilde eklemelisiniz. Kod şu şekilde,
<!--[if lte IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"> <![endif]-->
Ancak inşa ettiğimiz React.js ve izomorfik SPA nedeniyle işler biraz daha karmaşık görünüyor. HTML comment olarak jsx içerisine kod yazmanın tek yolu react.js’in dangerouslySetInnerHTML özelliğini kullanmak.
renderHead: function() {
return (
<head dangerouslySetInnerHTML={{__html: '<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->'}}>
</head>
);
}Script tagini açıp kapatmadan “<script src=’xxx’ />” şeklinde kapatırsanız React hata verecektir. Bu yüzden tagi açıp kapatmanız gerekiyor. En önemli sorun ise <head> içerisinde birden fazla script, meta gibi taglerden varsa bu çalışmayacaktır. Tabii ki bütün html dizesini dangerouslySetInnerHTML içine koyabilirsin, ama bu çok semantic olmayacaktır ve proje build edilirken sürekli warning alabilirsin.
Bu yüzden browserın html yorumlama açıklarını kötüye kullandım ve koşullu scripti şu an mükemmel çalışan <meta> etiketinin içine yerleştirdim.
renderHead() {
return (
var html5Shiv = '<!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->';
<head>
<title>Website title</title>
<meta name="react-comment-hack"
dangerouslySetInnerHTML={{__html: html5Shiv}}>
</meta>
</head>
);
}
Yorum yap