javascript - 推荐使用 React + Picturefill 的方式

我想使用 Picturefill + React + React Router(也使用 Webpack)。

上下文:尚无同构架构，因此在初始页面加载(路由更改)后获取数据。

…因此，渲染方法被调用了两次。

一次用于默认状态

一次更新状态(获取数据)

代码

render: function () {
    return (
        <picture>
            <!-- You get the idea -->

            <source srcSet={this.props.large} media="(min-width: 1024px)" />
            <source srcSet={this.props.medium} media="(min-width: 640px)" />
            <img srcSet={this.props.small} />
        </picture>
    );
}

示例 1:

<head>
    <!-- Recommended usage -->
    <script src="https://cdn.rawgit.com/scottjehl/picturefill/2.3.1/dist/picturefill.js"></script>
</head>

适用于 Safari 8.0.8

适用于 Chrome 45

适用于 Firefox 40.0.3(仅在刷新时，不在调整大小时)

示例 2:

// Use picturefill JavaScript API
componentDidUpdate() {
    picturefill();
}

在 Safari 8.0.8 中工作(仅在调整大小时， 而不是 在页面加载时)

适用于 Chrome 45

适用于 Firefox 40.0.3(仅在刷新时，不在调整大小时)

https://github.com/ldesplat/react-picture

最佳答案

我建议您将 picturefill 3.0 RC1 与 mutation plugin 结合使用。这样你就不需要调用 picturefill(); ，一切都是自动完成的。

这将适用于任何浏览器。

关于javascript - 推荐使用 React + Picturefill 的方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32727921/