Question

我们正在项目中使用hydrate中的react-dom，并且很难检测到损坏的图像链接。这些图像来自第三方API，因此我们无法事先知道哪些链接有效。

export default class Image extends PureComponent {
  render() {
    return (
      <img
        src={this.props.src}
        onError={(e) => {  
          e.target.src='https://mycdn.com/fallback.jpg';
        }}
      />
    )
  }
}

如果我们使用render而不是hydrate，则上面的代码有效。使用hydrate时是否可以检测出损坏的图像？

Answer 1

不幸的是，ReactDOM.hydrate没有附加onLoad或onError事件。

我能想到的最好的方法是进行一种2遍渲染。在服务器上，始终渲染后备（或占位符）图像。在客户端上，使用componentDidMount并声明将图像的src更新为真实源。

export default class Image extends PureComponent {
  state = { isMounted: false }

  componentDidMount() {
    this.setState({ isMounted: true });
  }

  render() {
    return (
      <img
        src={ isMounted ? this.props.src : this.props.fallbackSrc }
        onError={(e) => {  
          e.target.src = this.props.fallbackSrc;
        }}
      />
    );
  }
}

由于服务器未调用componentDidMount生命周期，因此它将始终呈现后备图像。

hydrate完成并安装了组件后，它将更新状态以触发重新渲染，然后将使用道具中的真实src。

当使用水合物而不是反应堆渲染时检测破损的图像

1 个答案: