如果你創建了一個類似元素做出反應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）組件的實現。

轉載于:https://www.cnblogs.com/passkey/p/10302164.html

總結

以上是生活随笔為你收集整理的react 从使用 看定义的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。