reactjs - React.js如何返回注释视频标签以支持ie9

Question

假设在 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" alt="…">
</picture>

在 react 中，这将是:

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 hacks？

Answer 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" alt="…">`
  };
};

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="${path}extralarge.jpg" media="(min-width: 1000px)">
    <source srcSet="${path}large.jpg" media="(min-width: 800px)">
    <!--[if IE 9]></video><![endif]-->
    <img src="${path}medium.jpg" alt="…">`
  };
};

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