React-redux 教程：children 是从哪里来的？

Question

我正在按照 react-redux 教程 http://redux.js.org/docs/basics/ExampleTodoList.html 进行学习。

看到 link.js，我在想 {children} 是从哪里传过来的？

import React from 'react'
import PropTypes from 'prop-types'
const Link = ({ active, children, onClick }) => {
  if (active) {
    return {children}
  }
return (
     {
        e.preventDefault()
        onClick()
      }}
    >
      {children}
    
  )
}
Link.propTypes = {
  active: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func.isRequired
}
export default Link

link.js 被容器组件 FilterLink.js 使用。FilterLink 传递了 "active" 值和 onclick 函数，但没有显式地传递 children 到 link.js。

import { connect } from 'react-redux'
import { setVisibilityFilter } from '../actions'
import Link from '../components/Link'
const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch(setVisibilityFilter(ownProps.filter))
    }
  }
}
const FilterLink = connect(
  mapStateToProps,
  mapDispatchToProps
)(Link)
export default FilterLink

请解释一下。

- redochka

---

这篇文章会有所帮助：https://medium.com/@iktakahiro/react-stateless-functional-component-with-typescript-ce5043466011。简单来说，`函数式组件`接受一个类型为对象的参数，通常称之为`props`。`({ active, children, onClick })这段代码更像是const { active, children, onClick } = props。此外，对于任何组件，prop是第一个参数，state`是第二个。 - Rajesh

注意，SFC不会有第二个属性(state)。由于它是无状态的，拥有状态是没有意义的。 - Rajesh

从filterlink中传递的Children被传递到link，您连接到FilterLink以链接... <FilterLink> TEXT </ Filterlink>中的所有文本或其他节点将在内部传递到link并呈现。 - Yoeri

Answer 1

在React中，你可能会有两种类型的组件。一种是扩展了React.Component的类，另一种是函数式组件，它只是一个普通的JavaScript函数。函数式组件也类似于类组件，可以接收props。我们可以使用this.props来获取类组件的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>

- Krasimir

Answer 2

children 属性来自于在调用 Link 组件时可能包含（被包裹）的组件，例如：

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

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

- Lafi