嵌套组件中的自动 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

这是由于 Link 组件 {...this.props} 上的 spread 属性。这允许将包含this.props.children 的this.props 的所有属性传递到链接组件中。 Here 是它的参考。