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

Question

我正在浏览 react-router-tutorial and am on 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 的所有属性传递到 Link 组件中。 Here 是对那个的引用。

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

Automatic this.props.children in nested components

jsx

reactjs