自动嵌套组件中的this.props.children

Question

我正在通过react-router-tutorial和lesson 5，并且有一个问题。

的教训谈到限定NavLink组件包裹Link部件，并赋予它一个activeClassName属性，它被用作如下：

<NavLink to="/about">About</NavLink> 

在课，它们定义了NavLink组分如下：

// modules/NavLink.js 
import React from 'react' 
import { Link } from 'react-router' 

export default React.createClass({ 
    render() { 
    return <Link {...this.props} activeClassName="active"/> 
    } 
}) 

让我困惑的是使用自闭合的Link组件。没有在NavLink的定义中说明将this.props.children放在Link组件的内部。我明确地试了下来，如下：

export default class extends React.Component { 
    render() { 
     return (
      <Link {...this.props} activeClassName="active">{this.props.children}</Link> 
     ) 
    } 
} 

而且这也按预期工作。我的问题是为什么？什么使自定义的Link组件在它们的定义中自动取NavLink的this.props.children并将其放入Link组件？

Answer 1

这是由于链接组件{...this.props}上的spread属性。这允许this.props的所有属性（包括this.props.children）被传递到链接组件。 Here是一个参考。