react 从使用 看定义

如果你创建了一个类似元素做出反应Twitter的下面，你会的组件定义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
}

 

如果你不熟悉渲染回调模式，这将看起来有点奇怪。在这种模式中，组件接收一个函数作为它的孩子。注意<Twitter>上面打开和关闭标签的内容。Twitter组件的子代替您之前可能看到的其他组件，而是一个功能。这意味着在实现Twitter组件时，我们需要将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.children作为一个函数。

这种模式的好处是我们已经将我们的父组件与子组件分离了。父组件管理状态，父组件的消费者可以决定以何种方式将从父级接收的参数应用于其UI。

为了证明这一点，我们假设在另一个文件中，我们要渲染一个Profile而不是一个Badge，因为我们使用render回调模式，所以我们可以很容易地在UI上交换，而不用改变我们对父（Twitter）组件的实现。