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）组件的实现。

转载于:https://www.cnblogs.com/passkey/p/10302164.html

react 从使用看定义相关推荐

React学习：路由定义及传参、数据复用-学习笔记
文章目录 React学习:路由定义及传参.数据复用-学习笔记在React中使用react-router-dom路由简单例子路由定义及传参 React学习:路由定义及传参.数据复用-学习笔记在R ...
react入门必看，欢迎大家收藏
react入门必看目前,vue虽然很火,但是很多大厂都在用react,所以,要想让自己的技能更上新的台阶,就必须要掌握react,我使用react也有段时间了,下面是我收藏的一些关于react相关的 ...
React Button 使用onClick 定义 antd 登录页面
作为小白学习react 前端,而且对es6的语法很多还是生疏的,平时熟悉的onclick 事件,在react中居然调试了很久,到最后才成功的调用了函数,本次算作是一次笔记,来记录react oncli ...
构建一个react项目_您想要了解更多有关React的内容吗？让我们构建一个游戏，然后玩。...
构建一个react项目 by Samer Buna 通过Samer Buna 您想要了解更多有关React的内容吗? 让我们构建一个游戏,然后玩. (Do you want to learn more ...
Flux -- Redux -- Redux React 基础实例教程
本文的目的很简单,介绍Redux相关概念用法及其在React项目中的基本使用假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识一般来说,推 ...
React 项目--创建组件（7）
创建组件在上一篇的博客中我们介绍了react中字符串的处理方式和字符串数组的处理方式,如需回顾: https://blog.csdn.net/datouniao1/article/details/1 ...
轻松入门React和Webpack
2019独角兽企业重金招聘Python工程师标准>>> 最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织 ...
React.js入门笔记
# React.js入门笔记核心提示这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
React,Redux,React-redux的错综复杂关系
最近了解了一些React的知识,在这里写一些关于React.js,Redux和React-redux的知识,供大家学习一.React 1.首先要知道React不是mvc框架,它只是一个库,只专注于视 ...

react 从使用看定义

react 从使用看定义相关推荐

最新文章

热门文章

react 从使用 看定义

react 从使用 看定义相关推荐

最新文章

热门文章

react 从使用看定义

react 从使用看定义相关推荐