亲爱的，我检查了孩子们

抓住你的虫子！

PropTypes 的实际应用

这些孩子是从哪里来的？！

让我们验证一下！

不要止步于模板

就这样！

请跟随我一起继续探索如何解释和理解样板代码！

今天我们将深入探讨 React 中的 PropTypes。实际上，促使我做这件事的原因是，在使用gatsby new <project-name>命令时会显示一些模板代码。

首先映入眼帘的是出现在以下位置的一段代码片段layout.js：

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

这段代码的有趣之处在于，严格来说，真正执行操作的并非 Gatsby 本身，而是 React 代码（Gatsby 本身就是基于 React 构建的），但它是 Gatsby CLI 入门项目默认包含的代码。

抓住你的虫子！

Proptypes是 React 中的一项功能，可以帮助验证通过 props 传递的值。

如果你对道具不太熟悉，这篇文章里有一些概述。

这些道具都是干什么用的？

Laurie ・ 2019年5月7日

#react #webdev #javascript #beginners

PropTypes 的理念在于它可以捕获组件间传递的数据类型不匹配的问题。例如，如果传入msg的是一个 `String` 类型的值，但目标组件期望的是一个 `String` 类型的值。即使没有 TypeScript 或其他支持类型检查的 JavaScript 扩展，React 也提供了 PropTypes 作为内置的类型检查机制。Stringnumber

PropTypes 的实际应用

PropTypes 在两个层面上发挥作用。它确保将正确的数据类型传递给特定组件。它还会检查组件是否接收到正确的数据类型。

这篇文章或许能帮助你理解组件的概念。

导出、导入和默认值，我的天哪！

Laurie ・ 2019年4月29日

#javascript #react #webdev #beginners

以我们最初使用的代码为例，它正在为Layout组件设置 PropTypes。也就是说，它正在定义传递给组件的 props 的验证Layout。

Layout.propTypes = {
     ...stuff goes here...
}

这些孩子是从哪里来的？！

这是Layout初始项目自带的组件。请注意传递给该组件的 props。它传递了一个名为 `<prop>` 的 prop children，并在渲染函数的主体中引用了它。

const Layout = ({ children }) => (
    render={data => (
      <>
        <Header siteTitle={data.site.siteMetadata.title} />
          <main>{children}</main>
          <footer/>
        </div>
      </>
    )}
)

现在我们来看一个组件本身的使用示例。我们可以在初始项目生成的组件Layout中找到这样的例子。NotFoundPage

const NotFoundPage = () => (
  <Layout>
    <SEO title="404: Not found" />
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </Layout>
)

嗯，这有点奇怪。乍一看，它Layout似乎完全没有使用 props。通常情况下，props 是以键值对的形式传递的，出现在组件的起始标签中。类似这样。

<Example msg="test" />

然后Example我们在组件内部传入 props 并访问msg内容。但Layout它并没有这样做。

事实证明，Layout它仍然在使用 props，只是方式不同。children实际上是一个特殊的内置 prop，它指的是标签内的Layout所有内容。

  <Layout>
//ALL OF THIS
    <SEO title="404: Not found" />
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn't exist... the sadness.</p>
//TO THIS
  </Layout>
)

布局开始标签和结束标签之间的所有内容都被视为属性children。

让我们验证一下！

现在我们回到PropTypes验证。既然我们知道了childrenprop是什么，就可以开始理解我们是如何验证该内容的了。

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

我们可以用 ` Layout<div>` 来包裹任何东西，但我们唯一关心的是它是否包裹了什么。我们不能渲染一个完全没有信息的页面，或者至少我们不想这样做。我们追求的不是一个空的布局。这就是我们使用 `<div>` 的原因isRequired。

我们还想对这个“东西”究竟是什么给出一个比较模糊的定义。node关键词的意思很简单：我传入了一个可渲染的东西。不管它是什么。

不要止步于模板

请注意，模板的这一部分随时可以修改。在定义 Gatsby 应用程序时，您可能需要强制执行不同的标准。例如，您可以像这样限制该属性只能有一个父元素。

Layout.propTypes = {
  children: PropTypes.element.isRequired
};

Gatsby 以此为起点，提示您使用类型强制，并向您展示类型强制的功能。

就这样！

现在我们明白了这段 PropTypes 代码片段是如何对Layout组件进行类型检查的。此外，我们也对内置children属性的使用更加得心应手了。

和以往一样，我们经常会在框架和项目中看到一些看似无关紧要的代码行，却懒得花时间去理解它们。我鼓励你带着好奇心去探索你所看到的每一件事！这会让你成为一名更优秀的程序员。

敬请期待更多样板基础知识！