IT技术 - redux 官方 todo 示例中来自 mapStateToProps 的 Children 在哪里？ - 吾爱随笔录

在https://redux.js.org/basics/exampletodolist#containers-filterlink-js中， FilterLink.js的代码是

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'

const mapStateToProps = (state, ownProps) => ({
  active: ownProps.filter === state.visibilityFilter
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  onClick: () => dispatch(setVisibilityFilter(ownProps.filter))
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)

我们可以很明显的发现，active和onClick被传递给了 Link 组件

但是，在链接组件中，https://redux.js.org/basics/exampletodolist#components-link-js，代码是

import React from 'react'
import PropTypes from 'prop-types'

const Link = ({ active, children, onClick }) => (
  <button
    onClick={onClick}
    disabled={active}
    style={{
      marginLeft: '4px'
    }}
  >
    {children}
  </button>
)

Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}

export default Link

Linkprops中的孩子来自哪里？

<Link> I am children </Link> props.children // I am children <MyComponent> <div> <h1>The root div element is called children here which can contain several elements and/or components.</h1> </div> </MyComponent> <MainComponent> <ChildComponent /> {/* children to MainComponent */} </MainComponent>