如果创建了类似于下面的 Icketang元素，那么该如何实现 Icketang类？

先看个例子：

< Icketang username="雨夜清荷">
{user = > user ？<Info user={user} />：<Loading />}
</Icketang>
import React, { Component } fromr "react"；
 export class Icketang extends Component {
//请实现你的代码
}

在上面的案例中，一个组件接受一个函数作为它的子组件。Icketang组件的子组件是一个函数，而不是一个常用的组件。这意味着在实现 Icketang组件时，需要将props. children作为一个函数来处理。

具体实现如下。

import React,  { Component } from "react"；
class Icketang extends Component {
 constructor ( props ){
  super ( props ) 
this .state = {
 user : props.user 
}
}
componentDidMount( ) {
//模拟异步获取数据操作，更新状态
setTimeout ( ( ) => this .setstate ({
user：'有课前端网'
})，2000）
}
render ( ) {
return this.props.children ( this .state.user )
}
}
class Loading extends Component {
 render  ( ) {
 return <p>Loading.</p>
}
}
class Info extends Component  { 
render ( ) {
 return <hl> { this .props.user }</h1>
}
}

调用 Icketang组件，并传递给user属性数据，把 props.children作为一个函数来处理。这种模式的好处是，我们已经将父组件与子组件分离了，父组件管理状态。父组件的使用者可以决定父组件以何种形式渲染子组件。

为了演示这一点，在渲染 Icketang组件时，分别传递和不传递user属性数据来观察渲染结果。

import {render} from  "react-dom";
 render (<Icketang>
{ user = > user ？<Info user = {user} /> ：<Loading /> }
</Icketang> , ickt）

上述代码没有为 Icketang组件传递user属性数据，因此将首先渲染 Loading组件，当父组件的user状态数据发生改变时，我们发现Info组件可以成功地渲染出来。

render（< Icketang user="雨夜清荷">
{ user => user ？<Info user = {user} /> ：<Loading />}
</Icketang>， ickt)

上述代码为 Icketang组件传递了user属性数据，因此将直接渲染Info组件，当父组件的user状态数据发生改变时，我们发现Info组件产生了更新，在整个过程中， Loading组件都未渲染。