React-redux 教程：孩子从哪里来[重复]答案

【问题标题】：React-redux tutorial : Where does children come from [duplicate]React-redux 教程：孩子从哪里来[重复]
【发布时间】：2017-09-08 06:53:02
【问题描述】：

我正在关注 react-redux 教程：http://redux.js.org/docs/basics/ExampleTodoList.html

查看 link.js，我想知道 {children} 来自哪里

从“反应”导入反应从 'prop-types' 导入 PropTypes const Link = ({ active, children, onClick }) => { 如果（主动）{ 返回{孩子} } 返回（ { e.preventDefault() 点击() }} > {孩子们} ) } Link.propTypes = { 活动：PropTypes.bool.isRequired，孩子：PropTypes.node.isRequired， onClick：PropTypes.func.isRequired } 导出默认链接

link.js 被容器组件 FilterLink.js 使用。 FilterLink 传递“活动”值和 onclick 函数，但没有显式子项传递给 link.js

从'react-redux'导入{连接} 从“../actions”导入 { setVisibilityFilter } 从“../components/Link”导入链接 const mapStateToProps = (state, ownProps) => { 返回 { 活动：ownProps.filter === state.visibilityFilter } } const mapDispatchToProps = (dispatch, ownProps) => { 返回 { onClick: () => { 调度（setVisibilityFilter（ownProps.filter）） } } } 常量 FilterLink = 连接（ mapStateToProps, mapDispatchToProps ）（关联）导出默认 FilterLink

请澄清。

【问题讨论】：

这会有所帮助：medium.com/@iktakahiro/…。但简短的回答是functional components 接受对象类型的参数。这通常称为props。 ({ active, children, onClick }) 这更像是const { active, children, onClick } = props。此外，对于任何组件，prop 是第一个参数，state 是第二个
注意，SFC 不会有第二个道具 (state)。由于它是无状态的，因此拥有状态是没有意义的。
mxstbr.blog/2017/02/react-children-deepdive 来自 filterlink 的子节点被传递给链接，您连接到 FilterLink 以链接... TEXT 中的所有文本或其他节点将在内部传递给链接并呈现

标签： javascript reactjs react-redux

【解决方案1】：

在 React 中，您可能有两种类型的组件。扩展 React.Component 的类或只是一个普通 JavaScript 函数的功能组件。功能组件也接收props，类似于我们使用this.props的类（或接收它们作为构造函数的第一个参数。例如：

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { name } = this.props;

    return <p>Hello { name }</p>;
  }
}

<MyComponent name='Jon Snow' />

或作为功能组件：

function MyComponent(props) {
  const { name } = props;

  return <p>Hello { name }</p>;
}

您的情况的困惑来自于函数定义中直接破坏道具的事实。所以上面的MyComponent可以写成：

function MyComponent({ name }) {
  return <p>Hello { name }</p>;
}

React 中的 children 属性表示作为组件的子元素添加的内容。例如：

<MyComponent>
  <Name />
</MyComponent>

or even

<MyComponent>
  { () => <p>Hello world</p> }
</MyComponent>

<Name /> 和 () => <p>Hello world</p> 等于 props.children。

在您的示例中，children 将是 FilterLink 中的内容。例如：

<FilterLink>
  <VisibleOnlyIfActiveIsTruethy />
</FilterLink>

【讨论】：

【解决方案2】：

children 属性来自您调用它时可能位于（包装）Link 组件内部的组件，例如：

<Parent>
 <Comp1 />
 <Comp2 />
</Parent>

在此代码中：Comp1 和 Comp2 是 Parent 组件的子组件。

【讨论】：