redux 官方 todo 示例中来自 mapStateToProps 的 Children 在哪里? [英] Where is Children from mapStateToProps in redux official todo example?

问题描述

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

import { connect } from 'react-redux'import { setVisibilityFilter } from '../actions'从../components/Link"导入链接const mapStateToProps = (state, ownProps) =>({活动: ownProps.filter === state.visibilityFilter})const mapDispatchToProps = (dispatch, ownProps) =>({onClick: () =>调度(setVisibilityFilter(ownProps.filter))})导出默认连接(mapStateToProps，mapDispatchToProps)(关联)

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

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

从 'react' 导入 React从 'prop-types' 导入 PropTypesconst Link = ({ active, children, onClick }) =>(<按钮onClick={onClick}禁用={活动}风格={{左边距:'4px'}}>{孩子们})Link.propTypes = {活动:PropTypes.bool.isRequired，孩子:PropTypes.node.isRequired，onClick: PropTypes.func.isRequired}导出默认链接

Link道具中的孩子从何而来?

解决方案

组件内的一切都是子组件:

我是孩子</链接>props.children//我是孩子<我的组件><div><h1>根div元素在这里被称为子元素它可以包含多个元素和/或组件.

</我的组件><主组件><子组件/>{/* MainComponent 的子组件 */}</MainComponent>

这就是 react props 的传递方式.

in https://redux.js.org/basics/exampletodolist#containers-filterlink-js, the code of FilterLink.js is

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)

We can find obviously, active and onClick is passed to Link component

However, in Link component, https://redux.js.org/basics/exampletodolist#components-link-js, the code is

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

Where does children in Link props come from?

解决方案

Everything that resides inside the component is children:

<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>

It's just how react props is passed.

这篇关于redux 官方 todo 示例中来自 mapStateToProps 的 Children 在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！