React 组件中的 Children 属性

我现在正在学习反应。这是代码的链接 -http://redux.js.org/docs/basics/ExampleTodoList.html

我有点难以理解这部分代码中发生的事情

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a
      href="#"
      onClick={e => {
        e.preventDefault()
        onClick()
      }}
    >
      {children}
    </a>
  )
}

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

我最难理解这个片段

return (
        <a
          href="#"
          onClick={e => {
            e.preventDefault()
            onClick()
          }}
        >
          {children}
        </a>
      )
    }

这里的{children}是什么意思？ 它有什么作用？

这是做什么的？

children: PropTypes.node.isRequired,

上面一行中的节点是什么意思？

当您使用自定义组件时，例如

<MyComponent>Hello World</MyComponent>

无论您在标签之间编写什么（在上面的例子中是 Hello World），都会作为children prop.

所以当你写你的组件时

const Link = ({ active, children, onClick }) => {

你正在解构道具并只得到active, children and onClick从传递给组件的 props

例如，考虑一下，您调用Link类似组件

<Link active="true" onClick={someFunc} style={{color: 'orange'}}>Hello</Link>

然后在所有道具中，即active, onClick, style, children，您只会访问active, onClick,children在组件中。

对于你的第二个问题：

这是做什么的？

子级：PropTypes.node.isRequired，

So here PropTypes是对传递给组件的 props 执行 typeCheck 的一种方法。它是从react-proptypes包裹。

So

children: PropTypes.node.isRequired

制作道具children被要求。所以如果你渲染你的组件像

<Link />

它不会通过类型检查，因此您需要这样做

<Link>Text</Link>