如果你创建了类似于下面的 Twitter 元素，那么它相关的类定义是啥样子的？

代码：

<Twitter username='tylermcginnis33'>

  {(user) => user === null

    ? <Loading />

    : <Badge info={user} />}

</Twitter>

代码：

import React, { Component, PropTypes } from 'react'

import fetchUser from 'twitter'

// fetchUser take in a username returns a promise

// which will resolve with that username's data.

class Twitter extends Component {

  // finish this

}

如果你还不熟悉回调渲染模式（Render Callback Pattern），这个代码可能看起来有点怪。
这种模式中，组件会接收某个函数作为其子组件，然后在渲染函数中以 props.children 进行调用：

import React, { Component, PropTypes } from 'react'

import fetchUser from 'twitter'

class Twitter extends Component {

  state = {

    user: null,

  }

  static propTypes = {

    username: PropTypes.string.isRequired,

  }

  componentDidMount () {

    fetchUser(this.props.username)

      .then((user) => this.setState({user}))

  }

  render () {

    return this.props.children(this.state.user)

  }

}

这种模式的优势在于将父组件与子组件解耦和，父组件可以直接访问子组件的内部状态而不需要再通过 Props 传递，这样父组件能够更为方便地控制子组件展示的 UI 界面。
譬如产品经理让我们将原本展示的 Badge 替换为 Profile，我们可以轻易地修改下回调函数即可：

<Twitter username='tylermcginnis33'>

  {(user) => user === null

    ? <Loading />

    : <Profile info={user} />}

</Twitter>

巴特西

如果你创建了类似于下面的 Twitter 元素，那么它相关的类定义是啥样子的？

最新文章

热门文章