这个错误页面可能会经常用到，所以可以把它做成一个组件 .. 这样就可以重复使用它了 .. 在 components 下面，新建一个 error-page 目录，里面添加一个 index.js 文件 ..

文件里面添加一个基本的 Taro 组件 .. 名字是 ErrorPage .. 组件里会用到全局样式，所以在它里面要添加一个 static options .. 把它的 addGlobalClass 的值设置成 true ..

在组件的视图里面 .. 这个 View 上可以添加一个 css 类 .. 名字是 page-demo .. 里面是错误页面上的内容 .. 用一个 this.props.content ... 使用这个组件的时候可以给它提供一个 content 属性 ..

再回到产品内容页面 ..

先导入刚才定义的这个 ErrorPage 组件 .. 位置是上一级目录的上一级目录下面的 components 里的 error-page ..

然后找到这个页面的视图部分 .. 重新定义一下这个 errorPage 的值 .. 用一下 ErrorPage 这个组件 .. 给它提供一个 content 属性 .. 对应的值是 errorPageMessage ..

回到模拟器预览一下 .. 现在页面上显示的错误页面是用 ErrorPage 组件生成的 ..

另外在我们之前创建的 ShopIndex 页面上也用到了这个错误页面 .. 打开这个页面 .. 在文件里面导入 ErrorPage 组件 .. 位置是上一级目录的上一级目录 .. components 下面的 error-page ..

找到这个页面的视图 .. 重新定义一下 errorPage 的值 .. 换成一个 ErrorPage 组件 .. 给它一个 content 属性 .. 值是 errorPageMessage ...

在上面再把这个 errorPageMessage 从页面的 state 里解构出来 ...