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
}

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

children: PropTypes.node.isRequired,

这只是类型的类型检查。有关类型检查工作原理的更多详细信息，请参阅

---

根据该示例，这表示prop子级是必需的，并且是node类型。此类型

节点

引用可以渲染的任何内容。然后在渲染中包含在标记中。

使用自定义组件时，如

<MyComponent>Hello World</MyComponent>

您正在对道具进行分解，只从传递到组件的道具中获取

活动的

、

子项

和

onClick

例如，您可以像这样调用

链接
组件

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

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

<Link />

使道具
子项
成为必需项。因此，如果您的渲染组件

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

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

<Link />



它将无法通过类型检查，因此您需要执行以下操作

<Link>Text</Link>

文本
如果你关心道具的类型，你需要使用
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}
    </>
  )
}

type Props=React.PropsWithChildren；
导出函数MyComponent（{name，myProp，children}:Props）{
返回(
{name}
{myProp}
{children！=null&&children}
)
}
检查文档，解释得非常正确：在同时包含开始标记和结束标记的JSX表达式中，这些标记之间的内容作为特殊属性传递：props.children.ok，让我检查ok谢谢。这很有帮助。我想知道的是，如果（active）{return{children}}，那么在上面的代码中，如果它是active，那么{children}将被返回，它等于所有active和completed。正确的？或者它只是返回处于活动状态的子对象。因此，如果All是活动的，那么它将以禁用状态返回All，我们将无法单击其余的，即第二次返回将显示为活动链接？？但是这两个标签都写为{children}，这让我有点困惑，所以链接标签之间传递的任何内容都将由{children}返回给单个标签。因此，如果您有三个这样的标签，那么每个标签都将根据children道具和活动道具值Happy to help:）返回不同的子项