React.js 如何返回评论视频标签以支持 ie9

Posted 2023-02-22

【中文标题】React.js 如何返回评论视频标签以支持 ie9

【英文标题】：React.js how to return commented video tag for ie9 support

【发布时间】：2015-12-27 16:19:20

【问题描述】：

假设在 React 中我想通过包装我的代码来支持 ie9，就像 picturefill 的这个示例一样：

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="examples/images/medium.jpg" >
</picture>

在反应中，那将是：

return (
                <picture>
                <!--[if IE 9]><video style="display: none;"><![endif]-->
                <source type="image/webp" className="full-photo2 slide-init" srcSet="./build/assets/images/photos/responsive/webp/" + image.id + "-400.webp 400w, ./build/assets/images/photos/responsive/webp/" + image.id + "-800.webp 800w, ./build/assets/images/photos/responsive/webp/" + image.id + "-1000.webp 1000w," />
                <img className="full-photo2 slide-init" srcSet="./build/assets/images/photos/responsive/jpg/" + image.id + "-400.jpg 400w, ./build/assets/images/photos/responsive/jpg/" + image.id + "-800.jpg 800w, ./build/assets/images/photos/responsive/jpg/" + image.id + "-1000.jpg 1000w," />
                <!--[if IE 9]></video><![endif]-->  
            </picture>
 )

当然，React 对此很生气。

那么如何在 React 返回中返回这样的 IE9 hack？

【问题讨论】：

虽然不鼓励使用，但您可以尝试facebook.github.io/react/tips/dangerously-set-inner-html.html

如何使用注释语法？

我在想这样的事情（未经测试）gist.github.com/djkirby/a6ef3e60ffc213b095da

见nemisj.com/conditional-ie-comments-in-react-js

提交一个关于 React 的错误以支持插入 HTML cmets。

【参考方案1】：

根据上面的链接，关于使用 dangerouslySetInnerHTML 的所有注意事项，这就是我所做的工作（使用 ES6）：-

const createMarkup = () => 
  return  __html:
    `<!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcSet="examples/images/extralarge.jpg" media="(min-width: 1000px)">
    <source srcSet="examples/images/large.jpg" media="(min-width: 800px)">
    <!--[if IE 9]></video><![endif]-->
    <img src="examples/images/medium.jpg" >`
  ;
;

return (
  <picture dangerouslySetInnerHTML=createMarkup()>
  </picture>
)

您当然也可以将参数传递给createMarkup 函数，并使用$ 语法（Getting Literal With ES6 Template Strings）将模板字符串中的参数作为占位符插入：-

const createMarkup = (path) => 
  return  __html:
    `<!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcSet="$pathextralarge.jpg" media="(min-width: 1000px)">
    <source srcSet="$pathlarge.jpg" media="(min-width: 800px)">
    <!--[if IE 9]></video><![endif]-->
    <img src="$pathmedium.jpg" >`
  ;
;

return (
  <picture dangerouslySetInnerHTML=createMarkup('examples/images/')>
  </picture>
)