React组件中的子prop

Question

我现在正在学习反应.这是与代码的链接 - 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,

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

Answer 1

当您使用自定义组件时,如

<MyComponent>Hello World</MyComponent>

无论你在标签之间写什么(在上面的例子中,Hello World)都作为children道具传递给组件.

所以在写你的组件时

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

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

例如,考虑将Link组件调用为

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

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

对于你的第二个问题:

这有什么作用？

children:PropTypes.node.isRequired,

所以这PropTypes是一种在传递给组件的道具上执行typeCheck的方法.它是从react-proptypes包中导入的.

所以

children: PropTypes.node.isRequired

使道具children成为必需品.所以,如果你渲染你的组件就像

<Link />

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

<Link>Text</Link>