Merge pull request #2297 from pedronauck/docs-namespace-in-jsx
Add a section at 'jsx-in-depth' talking about namespaced components
This commit is contained in:
commit
f656f1966e
|
@ -87,6 +87,68 @@ If you want to use JSX, the [Getting Started](/react/docs/getting-started.html)
|
|||
> ReactElement as an object literal to bypass the validation code in
|
||||
> `React.createElement`.
|
||||
|
||||
## Namespaced Components
|
||||
|
||||
If you are building a component that have a lot of childrens, or if you are building your application with some categories of reusable components (like a `Form` category), to make more simple and easiest, you can use a *namespaced component* to avoid something like this:
|
||||
|
||||
```javascript
|
||||
var Form = MyFormComponent;
|
||||
var FormRow = Form.Row;
|
||||
var FormLabel = Form.Label;
|
||||
var FormInput = Form.Input;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<FormRow>
|
||||
<FormLabel />
|
||||
<FormInput />
|
||||
</FormRow>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
Instead of declare a bunch of variables at the top, you'll get just one component that have other components as attributes.
|
||||
|
||||
```javascript
|
||||
var Form = MyFormComponent;
|
||||
|
||||
var App = (
|
||||
<Form>
|
||||
<Form.Row>
|
||||
<Form.Label />
|
||||
<Form.Input />
|
||||
</Form.Row>
|
||||
</Form>
|
||||
);
|
||||
```
|
||||
|
||||
For doing this, you just need to create your *"sub-components"* as attributes of the main component:
|
||||
|
||||
```javascript
|
||||
var MyFormComponent = React.createClass({ ... });
|
||||
|
||||
MyFormComponent.Row = React.createClass({ ... });
|
||||
MyFormComponent.Label = React.createClass({ ... });
|
||||
MyFormComponent.Input = React.createClass({ ... });
|
||||
```
|
||||
|
||||
JSX will take care to make the things right when compile your code.
|
||||
|
||||
```javascript
|
||||
var App = (
|
||||
React.createElement(Form, null,
|
||||
React.createElement(Form.Row, null,
|
||||
React.createElement(Form.Label, null),
|
||||
React.createElement(Form.Input, null)
|
||||
)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
> Note:
|
||||
>
|
||||
> This feature is available in [v0.11](http://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#jsx) and above.
|
||||
|
||||
## JavaScript Expressions
|
||||
|
||||
### Attribute Expressions
|
||||
|
|
Loading…
Reference in New Issue