小编典典

React组件中的子项prop

javascript

我现在正在学习反应。

我在理解代码这一部分的内容时遇到了一些困难

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,

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


阅读 296

收藏
2020-05-01

共1个答案

小编典典

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

<MyComponent>Hello World</MyComponent>

无论您在标签之间写的是什么(在上面的示例中为Hello World)都作为childrenprop 传递给组件。

所以当写你的组件像

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

你是解构的道具和只得到activechildrenonClick从道具传递到组件

考虑例如,您将Link组件称为

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

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

对于第二个问题:

这是做什么的?

子代:PropTypes.node.isRequired,

因此,这PropTypes是对传递给组件的道具执行typeCheck的方法。它是从react-proptypes包中导入的。

所以

children: PropTypes.node.isRequired

使道具children成为必需。因此,如果您将组件渲染为

<Link />

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

<Link>Text</Link>
2020-05-01