children 属性
children 属性
假设我们正在构建一个自定义按钮组件。它应该看起来和行为都像一个常规的 HTML 按钮,但它应该有红色背景和白色文本。
我们可以这样写:
然后我们会这样使用:
这有效……但感觉有点奇怪,不是吗?它与我们使用典型的 HTML 按钮的方式非常不同,在那里内容放在打开和关闭标签之间:
作为一种不错的语法糖
?React 让我们可以对自定义组件做同样的事情
当我们这样做时,我们可以通过 children 属性访问子元素:
React 为我们提供的一项有益的功能是,当我们在开放和关闭标签之间传递某些内容时,React 会自动将该值提供给我们。
当我们检查所产生的 React 元素时,我们可以看到这一点
children 是一种特殊值,当涉及到 props 时就是一个“保留字”。
但这并不特别。我认为许多新手在 React 中会认为 children 在某种程度上与其他 props 有所不同。实际上,它完全相同。
如果我们愿意,我们可以用“传统”的方式传递 children 。它有些笨拙,但结果是相同的:
因此,我们提供了一种特殊的语法,使 JSX 感觉更加像 HTML,但从根本上说, children 属性与其他任何属性是一样的。它没有什么特别或神奇的地方。