zoukankan      html  css  js  c++  java
  • 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)组件的实现。

  • 相关阅读:
    C#Winform中treeView控件使用总结
    转:vs发布window应用程序时出错:未能签名 ...setup.exe
    C# 常见集合之前的转换
    开发者眼中的Spring与JavaEE
    运行库到底做了什么?
    C++, Java和C#的编译、链接过程解析
    转载一篇将C/C++ 与lua混合使用入门讲的比较好的文章
    路会越走越窄的
    [DBNETLIB][ConnectionOpen(Connect()).]SQL Server 不存在或拒绝访问 数据库错误 解决办法总结
    Linux学习路线指南
  • 原文地址:https://www.cnblogs.com/passkey/p/10302164.html
Copyright © 2011-2022 走看看