最近几个月来，React 社区开始转向一个有趣的方向。到目前为止，我们的示例中的 children 属性都是 React 组件。然而，有一种新的模式越来越受欢迎，children 属性是一个 JSX 表达式。我们先从传入一个简单对象开始。

function UserName({ children }){

return (

);

}

function App(){

const user = {

firstName: 'Krasimir',

lastName: 'Tsonev'

};

return (

{ user }

);

}

这看起来有点怪怪的，但实际上它确实非常强大。例如，当某些父组件所知道的内容不需要传给子组件时。下面的示例是待办事项的列表。App 组件拥有全部的数据，并且它知道如何确定待办事项是否完成。TodoList 组件只是简单地封装了所需的 HTML 标记。

function TodoList({ todos, children }){

return (

• {

todos.map((todo, i) => (

{ children(todo) }

))

}

);

}

function App(){

const todos = [

{ label: 'Write tests', status: 'done' },

{ label: 'Sent report', status: 'progress' },

{ label: 'Answer emails', status: 'done' }

];

const isCompleted = todo => todo.status === 'done';

return (

{

todo => isCompleted(todo) ?

{ todo.label } :

todo.label

}

);

}

注意观察 App 组件是如何不暴露数据结构的。TodoList 完全不知道 label 和 status 属性。

名为 render prop 的模式与上面所讲的基本相同，除了渲染待办事项使用的是 render 属性，而不是 children 。

function TodoList({ todos, render }){

return (

• {

todos.map((todo, i) => (

{ render(todo) }

))

}

);

}

return (

todos={ todos }

render={

todo => isCompleted(todo) ?

{ todo.label } : todo.label

} />

);

这两种模式 将函数作为 children 传入 和 render prop 是我最新非常喜欢的。当我们想要复用代码时，它们提供了灵活性和帮助。它们还是抽象命令式代码的强力方式。

class DataProvider extends React.Component{

constructor(props) {

super(props);

this.state = { data: null };

setTimeout(() => this.setState({ data: 'Hey there!' }), 5000);

}

render() {

if (this.state.data === null) return null;

return (

{ this.props.render(this.state.data) }

);

}

}

DataProvider 刚开始不渲染任何内容。5 秒后我们更新了组件的状态并渲染出一个 ， 的内容是由 render 属性返回的。可以想象一下同样的组件，数据是从远程服务器获取的，我们只想数据获取后才进行显示。

The data is here!

} />

我们描述了我们想要做的事，而不是如何去做。细节都封装在了 DataProvider 中。最近，我们在工作中使用这种模式，我们必须将某些界面限制只对具有 read:products 权限的用户开放。我们使用的是 render prop 模式。

permissionsInclude={[ 'read:products' ]}

render={ () => } />

这种声明式的方式相当不错，不言自明。Authorize 会进行认证，以检查当前用户是否具有权限。如果用户具有读取产品列表的权限，那么我们便渲染 ProductList 。

结语

你是否对为何还在使用 HTML 感到奇怪？HTML 是在互联网创建之初创建的，直到现在我们仍然在使用它。原因在于它的高度可组合性。React 和它的 JSX 看起来像进化的 HTML ，因此它具备同样的功能。因此，请确保精通组合，因为它是 React 最大的好处之一。