一、一個簡單的小例子

1.父元件

<Twitter username='tylermcginnis33'>
 {(user) => user === null
  ? <Loading />
  : <Badge info={user} />}
</Twitter>

2.子元件框架

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
}

3.子元件具體實現

import React,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>

到此這篇關於詳解React的回撥渲染模式的文章就介紹到這了,更多相關React 回撥渲染內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！