You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This method appends the child nodes using the platform specific function for `docx` i.e `appendChild`. Remember we used this in our reconciler's `appendInitialChild` method to check whether the
73
-
parent instance has a method called `appendChild` or not !?
Along with `appendChild`method, you can also add `removeChild`method to remove child nodes. Since our host target does not provide a mutative API for removing child nodes, we are not using this method.
> For this tutorial, the scope is kept limited for `Text`component. In a more practical example, you might want to validate the nesting of components too.
85
+
> 在本教程,`Text`组件不允许嵌套其它的组件。在更实际的示例中,你可能需要验证组件的嵌套。
88
86
89
-
#### Note
87
+
#### 注意
90
88
91
-
-Do not track the children inside an array in your class component API. Instead, directly append them using specific host API, as React provides all the valuable information about the child (which was removed or added)
89
+
-不要在类组件 API 中使用数组追踪子组件。相反,直接使用特定的宿主 API 添加它们,因为 React 提供了有关子节点(已删除或添加)的所有有价值的信息。
92
90
93
-
This is correct
91
+
这是正确的
94
92
95
93
```js
96
94
classMyComponent {
@@ -101,7 +99,7 @@ class MyComponent {
101
99
102
100
appendChild(child) {
103
101
some_platform_api.add(child)
104
-
//In browser, you may use something like: document.appendChild(child)
102
+
//在浏览器中,我们可能会使用 document.appendChild(child)
105
103
}
106
104
}
107
105
```
@@ -123,7 +121,7 @@ class MyComponent {
123
121
124
122
renderChildren() {
125
123
for (let i =0; i <this.children.length; i++) {
126
-
//do something with this.children[i]
124
+
//对 this.children[i] 进行一些操作
127
125
}
128
126
}
129
127
@@ -133,22 +131,22 @@ class MyComponent {
133
131
}
134
132
```
135
133
136
-
-If you're rendering target does not provide a mutate method like `appendChild`and instead only lets you replace the whole "scene" at once, you might want to use the "persistent" renderer mode instead. Here's an [example host config for persistent renderer](https://github.com/facebook/react/blob/master/packages/react-native-renderer/src/ReactFabricHostConfig.js).
I think you can easily understand what's happening inside the `createElement` method. It takes an element, props, and the root instance.
167
-
168
-
Depending upon the type of element, we return an instance based on it else we return `undefined`.
165
+
根据元素的类型,我们返回它的实例,否则我们返回 `undefined`。
169
166
170
-
We're done with the part two of our tutorial. We created the API for our two components (`Document`and`Text`) and a `createElement`method to create an element. In the next part, we will create a render method to flush everything to the host environment.
0 commit comments