zoukankan      html  css  js  c++  java
  • 如果你创建了类似于下面的 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
    }

    如果你还不熟悉回调渲染模式(Render Callback Pattern),这个代码可能看起来有点怪。
    这种模式中,组件会接收某个函数作为其子组件,然后在渲染函数中以 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 传递,这样父组件能够更为方便地控制子组件展示的 UI 界面。
    譬如产品经理让我们将原本展示的 Badge 替换为 Profile,我们可以轻易地修改下回调函数即可:

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

    .

  • 相关阅读:
    Business Objects 基础
    常用的bw基础知识
    SAP BW传输请求操作步骤
    FI/CO 财务基础知识
    SAP财务常用数据源概览
    HANA 和 SAP NetWeaver BW
    Request.QueryString中文乱码
    完全备份类型
    SQL Server备份属于I/O密集型操作
    SQL Server 通过发布订阅 实现数据库同步
  • 原文地址:https://www.cnblogs.com/crazycode2/p/10798292.html
Copyright © 2011-2022 走看看