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>

在反应中，那将是：

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>
)

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

1 个答案: