Условные комментарии для Internet Explorer в React
Иногда сделать простые вещи очень непросто. Например, добавить условный комментарии для IE в html. Этим я сегодня и занимался.
В моем текущем проекте нам нужно было поддерживать css медиа-запросы в IE9. Для этого было решено использовать библиотеку media-match.
Что может быть проще? Пара строк кода с условным комментарием:
<!--[if lte IE 9]>
<script src="/public/media.match.js">
<![endif]-->Но все оказалось намного сложнее, так как мы используем React.js и делаем изоморфное одностраничное приложение. Кто бы знал, что React не рендерит на странице комментарии, помещенные в .jsx-файлы. Показынный ниже способ не работает:
renderHead: function() {
return (
<head>
<!--[if lte IE 9]>
<script src="/public/media.match.js"/>
<![endif]-->
</head>
);
}Единственный способ, который мне удалось найти – dangerouslySetInnerHTML для head, внутрь которого я поместил комментарий и все заработало:
renderHead: function() {
return (
<head dangerouslySetInnerHTML={{__html: '<!--[if lte IE 9]><script src="/public/media.match.js"></script><![endif]-->'}}>
</head>
);
}Следует также отметить, что тэг script должен быть закрыт отдельно <script></script>, так как сокращение <script /> не работает в React.
Последняя, но, при этом, большая проблема – если надо поместить несколько таких комментариев в head. Конечно, можно все просто написать в одну строку, но это выглядит «убого».
Поэтому я, да простят меня парсерсы HTML в браузерах, положил условные комментарии внутри тэга meta:
renderHead() {
return (
var comment = '<!--[if lte IE 9]><script src="/public/media.match.js"></script><![endif]-->';
<head>
<title>Website title</title>
<meta name="react-comment-hack"
dangerouslySetInnerHTML={{__html: comment}}>
</meta>
</head>
);
}Успешного «реакта».
© Автор Maks Nemisj