Skip to content

Update thinking-in-react.md #1757

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
FE-kang wants to merge 1 commit into from
Closed

Update thinking-in-react.md #1757

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 1 addition & 9 deletions src/content/learn/thinking-in-react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ JSON API 返回如下的数据:

## 步骤一：将 UI 拆解为组件层级结构 {/*step-1-break-the-ui-into-a-component-hierarchy*/}

一开始，在绘制原型中的每个组件和子组件周围绘制盒子并命名它们。如果你与设计师一起工作，他们可能早已在其设计工具中对这些组件进行了命名。检查一下它们!
首先，为原型中的每个组件和子组件绘制包围盒并命名它们。如果你与设计师一起工作，他们可能早已在其设计工具中对这些组件进行了命名。检查一下它们!

取决于你的使用背景，可以考虑通过不同的方式将设计分割为组件:

Expand All @@ -50,10 +50,6 @@ JSON API 返回如下的数据:

以下展示了五个组件:

<FullWidth>

<CodeDiagram flip>

<img src="/images/docs/s_thinking-in-react_ui_outline.png" width="500" style={{margin: '0 auto'}} />

1. `FilterableProductTable`（灰色）包含完整的应用。
Expand All @@ -62,10 +58,6 @@ JSON API 返回如下的数据:
4. `ProductCategoryRow`（绿色）展示每个类别的表头。
5. `ProductRow`（黄色）展示每个产品的行。

</CodeDiagram>

</FullWidth>

看向 `ProductTable`（淡紫色），可以看到表头（包含 "Name" 和 "Price" 标签）并不是独立的组件。这是个人喜好的问题，你可以采取任何一种方式继续。在这个例子中，它是作为 `ProductTable` 的一部分，因为它展现在 `ProductTable` 列表之中。然而，如果这个表头变得复杂（举个例子，如果添加排序），创建独立的 `ProductTableHeader` 组件就变得有意义了。

现在你已经在原型中辨别了组件，并将它们转化为了层级结构。在原型中出现在其他组件内部的组件在层级结构中应作为子项出现:
Expand Down
Loading