React.js 如何 return 评论视频标签以支持 ie9
React.js how to return commented video tag for ie9 support
假设在 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 对此很生气。
那么你怎么能 return IE9 在你的 React returns 中像这样破解?
根据上述 link 关于使用 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 中我想通过包装我的代码来支持 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 对此很生气。
那么你怎么能 return IE9 在你的 React returns 中像这样破解?
根据上述 link 关于使用 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>
)