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

时间:2016-04-22 04:13:56

标签: reactjs jsx

我正在浏览react-router-tutorial并在lesson 5上,并有一个问题。

本课程讨论如何定义包裹LOAD DATA INFILE 'D:/Singapore/rau_sales_order.csv' INTO TABLE tbldemo FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n' IGNORE 1 LINES; 组件的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的{​​{1}}并将其放入this.props.children组件中?

1 个答案:

答案 0 :(得分:0)

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