React组件中的子prop-Java 学习之路

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

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

2 回答

2
当您使用自定义组件时，如
```
<MyComponent>Hello World</MyComponent>
```
无论你在标签之间写什么（在上面的例子中，Hello World）都作为 children prop传递给组件 .

所以在写你的组件时
```
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>
```
回复于 2024-04-26T08:26:58+08:00
8
```
children: PropTypes.node.isRequired,
```
这只是反应类型的类型检查 . 有关类型检查的工作原理，请参阅https://facebook.github.io/react/docs/typechecking-with-proptypes.html .

根据示例，这表示道具儿童是必需的并且是节点类型 . 此类型 node 指的是可以呈现的任何内容 . 然后将其包含在渲染中的标记内 .
回复于 2024-04-26T08:26:58+08:00

React组件中的子prop

2 回答

相关问题