mirror of https://github.com/status-im/reagent.git
Updated to include a description of Fragments.
This commit adds a brief description and examples of the usage of React Fragments via the `:<>` Hiccup form.
This commit is contained in:
parent
d06792e4fd
commit
2cd4cf5593
|
@ -87,6 +87,25 @@ That isn't valid Hiccup and you'll get a slightly baffling error. You'll have to
|
||||||
[:div name]]) ;; [:div] containing two nested [:divs]
|
[:div name]]) ;; [:div] containing two nested [:divs]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Alternatively, you could return a [React Fragment](https://reactjs.org/docs/fragments.html). In reagent, a React Fragment is created using the `:<>` Hiccup form.
|
||||||
|
|
||||||
|
```cljs
|
||||||
|
(defn right-component
|
||||||
|
[name]
|
||||||
|
[:<>
|
||||||
|
[:div "Hello"]
|
||||||
|
[:div name]])
|
||||||
|
```
|
||||||
|
|
||||||
|
Referring to the example in [React's documentation](https://reactjs.org/docs/fragments.html), the `Columns` component could be defined in reagent as:
|
||||||
|
|
||||||
|
```cljs
|
||||||
|
(defn columns
|
||||||
|
[:<>
|
||||||
|
[:td "Hello"]
|
||||||
|
[:td "World"]]
|
||||||
|
```
|
||||||
|
|
||||||
## Form-2: A Function Returning A Function
|
## Form-2: A Function Returning A Function
|
||||||
|
|
||||||
Now, let's take one step up in complexity. Sometimes, a component requires:
|
Now, let's take one step up in complexity. Sometimes, a component requires:
|
||||||
|
|
Loading…
Reference in New Issue