React 组件中的 children 道具

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
}

我最难理解这个sn-p

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

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

这有什么作用？

children: PropTypes.node.isRequired,

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

Answer 1

如果您关心道具的类型，则需要使用React.PropsWithChildren，例如

type Props = React.PropsWithChildren<{
  name: string; // strongly typed!
  myProp: string;
}>;

export function MyComponent({ name, myProp, children }: Props) {
  return (
    <>
      <div>{name}</div>
      <div>{myProp}</div>
      {children != null && children}
    </>
  )
}

Answer 2

children: PropTypes.node.isRequired,

这只是对 react proptypes 的类型检查。有关类型检查如何工作的更多详细信息，请参阅 https://facebook.github.io/react/docs/typechecking-with-proptypes.html。

根据示例，这表示 prop children 是必需的，并且是 node 类型。这种类型node 指的是可以渲染的任何东西。然后将其包含在渲染中的标记中。

Answer 3

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

<MyComponent>Hello World</MyComponent>

无论你在标签之间写什么（在上面的例子中是 Hello World）都会作为 children 属性传递给组件。

所以当你写你的组件时

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

你正在解构 props 并从传递给组件的 props 中仅获得 active、children 和 onClick

例如，您将Link 组件称为

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

那么在所有的 props 中，即active, onClick, style, children，你将只能在组件中访问active, onClick,children。

第二个问题：

这有什么作用？

孩子：PropTypes.node.isRequired，

所以这里PropTypes 是一种对传递给组件的道具执行类型检查的方法。它是从react-proptypes 包中导入的。

所以

children: PropTypes.node.isRequired

使道具children 成为必需的。所以如果你渲染你的组件像

<Link />

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

<Link>Text</Link>