React.js：组件

你好，我的名字是托尼，在这些课程中，你将学到 关于组件。 在本课中，我们将了解 ES6 plus 函数 JSX 来渲染组件。 我想引起人们的注意，因为这非常 重要的。 在现实世界的场景中，你不会把每一个 一个文件夹上的组件，因为正如您可以想象的那样，它 很快就会变得不守规矩。 我们追求的专业应用是什么 现实世界的情况是这样的。 正如您所看到的，它不再是一个平面结构。 我们所有的组件都位于它们自己的文件夹内， 称为组件，每个组件都有自己的 文件夹。 该文件夹的结构使得定义 组件位于 JS 或 JSX 文件中， 如果需要的话，造型解决方案位于一个 CSS 文件。 现在，在专业环境中，还会有 此处为 .test 文件或 .spec 文件，其中包含单元 测试。 我们暂时不用担心这个 但只是想让你知道，如果你在现实中看到过这个 世界， 事情很可能就是这样。 现在，为了我们的目的，我们要做的是 创建一个应用程序 这将保留我们所拥有的所有物品的清单 那天要做的事， 我们将有能力将它们从我们的名单中一一删除 我们希望完成它们。 这个特定的组件将是 只是我们所有任务的列表。 现在，首先，我们将从 React 导入 React。 这是非常重要的。 React 是一个超级全局的。 我们需要它来开发所有应用程序。 在这里，我们将拥有我们的组件。 我们正在构建的组件称为任务列表， 这需要 以下三个论点。 任务， 让我们关闭它，这样它就不会抱怨。 所以任务就是我们要遍历的记录集 并一一输出任务。 HandleCheck 是一个函数，当我们 对应于我们每一项任务的复选框。 HandleDelete 是另一个将要触发的函数 当我们实际尝试从列表中删除任务时。 现在，我们如何在 React 中进行有条件渲染？ 我们将在 React 内部有条件地渲染 不使用传统的 if -else 语句，因为 JSX 命名法不允许这样做。 我们将使用第三个语句。 你 以前可能看过第三次声明，这是 他们的格式。 让我们在上面这样做，这样我们就不会搞乱我们的功能，就像 一个例子。 所以我们要测试的条件始终是第一个 结构中的论证。 如果这个条件恰好为真，那么如果 我们的陈述是正确的，这是代码的一部分 跑步。 如果为 false，则这就是运行的代码部分。 我们准备去 采用同样的东西并将其扩展到我们的 React 生态系统 让它看起来像这样。 所以我们的 记录集将是一个无序列表， 如果它的长度小于一，让我们把它加长 人类可读并说它的长度为零。 三等号非常重要。 如果你做一个双等零， 这意味着这个 也等于。 所以它基本上只是比较值，但它不 比较类型。 但我们并不追求 字符零。 我们正在追寻零号。 所以我们总是做三等号来进行比较。 它使其类型安全。 所以我们要做的是如果没有显示任何内容， 我们将向用户呈现一段文本 基本上告诉他们，嘿，什么也没有显示。 目前您的议程中没有任何内容。 您想添加一个活动吗？ 如果显示某些内容， 这就是事情变得有趣的地方，这就是我们 将循环遍历一个记录集 我们作为第一个参数传递给这个函数。 让我们看看它是什么样子的。 删除图标。 让我们导入我的图标，这样它就不会抱怨了。 我们将在顶部执行此操作并删除我们的示例。 现在我们的第三个子句的 else 部分 有地图功能。 这是我们传递给地图函数的函数， 它会为我们生成 HTML，这将 基本上是一个 LI 或无序列表的列表项 我们在一开始就宣布了这一点。 让我们把这个问题后退一步。 开始了。 正如你所看到的，我们基本上将其输出为 一次一项。 一旦我们 在我们课程的下一部分中实际运行它。 正如你所看到的，我们正在输出任务。 有一个与之对应的复选框。 这是文字 这实际上说明了任务是什么。 这是让我们删除它的按钮。 再说一遍，我们只是试图概念化任务， 它会是什么样子。 我们将在课程的下一部分中讨论。 现在，最后，我们不能忘记每一个组件 做这个。 我们正在出口 我们刚刚创建的组件， 我们将其默认导出。 现在，我们将其导出为默认值意味着什么？ 这意味着当我们要在里面消费它时 我们的应用程序组件将保存 我们整个应用程序的定义， 我们将像这样导入它，不带卷曲 大括号。 现在， 因为我们将其作为默认导入，所以我们可以真正调用它 无论我们想要什么， 它仍然有效。 如果我们像这样将其导出为命名导出， 我们可以用花括号导入它，并且只能 具体是按名字。 你可能会问，为什么不这样做呢？ 看起来比较安全。 嗯，因为在 React 中，我们经常包装我们想要的对象 用其他一些函数创建的。 我们稍后会讨论这个问题，但实际上我们可以说 并赋予它额外的功能， 逻辑功能。 但这基本上就是命名的原因 导出和导入不是在 React、Next .js 内部完成的， 或任何依赖于 React 作为基础的东西。 在下一课中，我们将看看哪些组件 道具是什么，它们的目的是什么， 以及如何使用它们。 感谢您的观看。