From aa5ad491d5a72a93ff69ff9265119301ab50bc9d Mon Sep 17 00:00:00 2001 From: Maxkang Date: Sun, 17 Aug 2025 11:39:56 +0800 Subject: [PATCH] Update thinking-in-react.md Modify the translation and image layout styles for IMG[s_thinking-in-react_ui_outline.png] --- src/content/learn/thinking-in-react.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 0c7465d9f2..7d25337770 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -38,7 +38,7 @@ JSON API 返回如下的数据: ## 步骤一：将 UI 拆解为组件层级结构 {/*step-1-break-the-ui-into-a-component-hierarchy*/} -一开始，在绘制原型中的每个组件和子组件周围绘制盒子并命名它们。如果你与设计师一起工作，他们可能早已在其设计工具中对这些组件进行了命名。检查一下它们! +首先，为原型中的每个组件和子组件绘制包围盒并命名它们。如果你与设计师一起工作，他们可能早已在其设计工具中对这些组件进行了命名。检查一下它们! 取决于你的使用背景，可以考虑通过不同的方式将设计分割为组件: @@ -50,10 +50,6 @@ JSON API 返回如下的数据: 以下展示了五个组件: - - - - 1. `FilterableProductTable`（灰色）包含完整的应用。 @@ -62,10 +58,6 @@ JSON API 返回如下的数据: 4. `ProductCategoryRow`（绿色）展示每个类别的表头。 5. `ProductRow`（黄色）展示每个产品的行。 - - - - 看向 `ProductTable`（淡紫色），可以看到表头（包含 "Name" 和 "Price" 标签）并不是独立的组件。这是个人喜好的问题，你可以采取任何一种方式继续。在这个例子中，它是作为 `ProductTable` 的一部分，因为它展现在 `ProductTable` 列表之中。然而，如果这个表头变得复杂（举个例子，如果添加排序），创建独立的 `ProductTableHeader` 组件就变得有意义了。 现在你已经在原型中辨别了组件，并将它们转化为了层级结构。在原型中出现在其他组件内部的组件在层级结构中应作为子项出现: