React组件中的子项prop

一尘不染

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,

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

阅读 263

2020-05-01

共1个答案

一尘不染

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

<MyComponent>Hello World</MyComponent>

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

所以当写你的组件像

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在组件中访问。

对于第二个问题：

这是做什么的？

子代：PropTypes.node.isRequired，

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

所以

children: PropTypes.node.isRequired

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

<Link />

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

<Link>Text</Link>

2020-05-01