React 组件中的 children 属性

IT技术 javascript reactjs
2021-01-26 12:47:57

我现在正在学习react。这是代码的链接 - 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} 在这里是什么意思？它有什么作用？

这有什么作用？

children: PropTypes.node.isRequired,

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

3个回答

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

<MyComponent>Hello World</MyComponent>

你在标签之间写的任何东西（在上面的例子中，Hello World）都会作为childrenprops传递给组件。

所以当你写你的组件时

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

您正在解构props并获取 only active，children并onClick从传递给组件的props中获取

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

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

然后在所有props ie 中active, onClick, style, children，您将只能active, onClick,children在组件中访问。

对于你的第二个问题：

这有什么作用？

孩子：PropTypes.node.isRequired，

所以这里PropTypes有一种对传递给组件的 props 执行 typeCheck 的方法。它是从react-proptypes包中导入的。

所以 

children: PropTypes.node.isRequired

使propschildren成为必需的。所以如果你渲染你的组件

<Link />

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

<Link>Text</Link>
好，谢谢。这有帮助。我想知道的是 if (active) { return <span>{children}</span> } 所以，在上面的代码中，如果它是活动的，那么 {children} 将被返回，它等于 All Active并完成。对？或者它可能只是返回活跃的孩子。因此，如果 All 处于活动状态，那么它返回 All 为禁用状态，我们将无法单击，其余部分，即第二次返回它将显示为活动链接？但它们都被写成{儿童}，这让我有点困惑。
2021-03-18 12:47:57
因此，链接标签之间传递的任何内容都将由 {children} 为单个标签返回。因此，如果您有三个这样的标签，那么它们中的每一个都将根据 children 属性和 active prop 值返回不同的孩子
2021-03-21 12:47:57
乐于帮助 ：）
2021-03-21 12:47:57 
children: PropTypes.node.isRequired,

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

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

如果您关心props的类型，则需要使用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}
    </>
  )
}
其它你可能感兴趣的问题
上一篇获取变量名。javascript“反射” 下一篇如何仅从 Firebase 获取没有现有数据的新数据？