13、Elm 应用开发：图像上传显示与测试驱动开发实践

Elm 应用开发：图像上传显示与测试驱动开发实践

1. 显示上传的图像

现在已经能够上传图像，接下来要将其显示出来。这部分会使用端口将新的图像数组发送回 Elm，同时利用标志（flags）在嵌入应用时向 Elm 发送笔记的图像。

1.1 通过端口接收新图像

当 App 组件更新笔记时，它会重新渲染，同时也会重新渲染 ImageUpload 组件。由于将笔记的图像传递给了 images 属性，ImageUpload 可以做出反应，将新图像发送到 Elm。

在 React 中，有一个特殊的方法 componentDidUpdate ，当组件从其父组件接收到新的属性后更新时会调用该方法。可以在 ImageUpload 中利用这个方法来获取新图像并发送到 Elm。在 src/ImageUpload.js 中，在 componentWillUnmount 下方添加如下代码：

componentDidUpdate() {
  this.elm.ports.receiveImages.send(this.props.images);
}

当 React 调用 componentDidUpdate 时，组件的属性 this.props.images 已经包含了新图像。使用名为 receiveImages 的新端口，通过 send 函数将图像