maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Paul O’Shannessy 2015-01-16 16:21:22 -08:00
parent 4f50071de0 1adbc22fde
commit f656f1966e
1 changed files with 63 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
docs/docs/02.1-jsx-in-depth.md
View File

@ -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
@ -139,4 +201,4 @@ var content = (
> NOTE:
>
> JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.
> JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/jsx-gotchas.html) for some key differences.