#14 React.js 加载、刷新数据 - 高阶组件

题目 #10 React.js 加载、刷新数据 这种加载数据、刷新数据的行为很常见,现在把这种逻辑抽离到高阶组件当中去。完成高阶组件 loadAndRefresh,它具有以下功能:

class Post extends Component {
  render () {
    return (
      <div>
        <p>{this.props.content}</p>
        <button onClick={() => this.props.refresh()}>刷新</button>
      </div>
    )
  }
}

Post = loadAndRefresh('/post')(Post)

高阶组件 loadAndRefresh 接受一个 url 作为参数,然后返回一个接受组件作为参数的函数,这个新函数返回一个新的组件。新的组件渲染的时候会给传入的组件设置 contentrefresh 作为 props

环境中已经定义好了一个 getData(url) 的返回 Promise 的函数,它会去服务器取一个字符串的文本,你需要通过 contentprops 把它传给被包裹的组件。组件在第一次加载还有 refresh 的时候会去服务器取数据。

另外,组件在加载数据的时候,content 显示 数据加载中...。而且,所有传给 loadAndRefresh 返回的组件的 props 要原封不动传给被包裹的组件。


使用第三方依赖
JavaScript
登录提交答案

与 的连接断开,我们正在尝试重连,请耐心等待