Merge pull request #5695 from gaearon/patch-2
Fix children to be a prop in the blog post example
This commit is contained in:
commit
50af034108
|
@ -9,7 +9,7 @@ The difference between **components, their instances, and elements** confuses ma
|
|||
|
||||
If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` *component* by creating a class. When the app is running, you may have several *instances* of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce *elements*?
|
||||
|
||||
In this traditional UI model, it is up to you take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
|
||||
In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
|
||||
|
||||
```js
|
||||
class Form extends TraditionalObjectOrientedView {
|
||||
|
@ -70,10 +70,12 @@ When an element’s `type` is a string, it represents a DOM node with that tag n
|
|||
className: 'button button-blue',
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This element is just a way to represent the following HTML as a plain object:
|
||||
|
@ -160,7 +162,7 @@ const DeleteAccount = () => (
|
|||
);
|
||||
```
|
||||
|
||||
This mix and matching helps keep components decoupled from each other, as they can express both *is-a* () and *has-a* relationships exclusively through composition:
|
||||
This mix and matching helps keep components decoupled from each other, as they can express both *is-a* and *has-a* relationships exclusively through composition:
|
||||
|
||||
* `Button` is a DOM `<button>` with specific properties.
|
||||
* `DangerButton` is a `Button` with specific properties.
|
||||
|
@ -191,10 +193,12 @@ React will ask `Button` what it renders to. The `Button` will return this elemen
|
|||
className: 'button button-blue',
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
React will repeat this process until it knows the underlying DOM tag elements for every component on the page.
|
||||
|
|
Loading…
Reference in New Issue