Skip to content

Commit 0eff058

Browse files
committed
Add table of render* methods.
1 parent 259c91d commit 0eff058

File tree

1 file changed

+56
-1
lines changed

1 file changed

+56
-1
lines changed

doc/CHANGELOG-0.10.md

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,62 @@ They're now all defined in one place, and have been renamed to represent their t
284284
Who remembers what mish-mash existed before, in this new world you ask for the types you want by adding suffixes to
285285
the render function name. Conversely, it's now always obvious what's happening by looking at the function name.
286286

287-
**TODO: Add table or examples**
287+
288+
All `render*` functions take as their sole argument a function that returns a ReactElement (a ReactElement
289+
is a ReactComponent or DOM element).
290+
291+
The `render` function takes a function which has as its first argument a CompState,
292+
which is broadly analogous to javascript's `this`, and which scalajs-react conventionally designates with `$`.
293+
294+
|Method|Argument|Example|
295+
| --- | --- | --- | --- |
296+
|render|Function taking CompState (which is analogous to javascript `this`)|`.render { $ => <.div() }`|
297+
298+
Additional `render*` convenience functions *without an underscore* specify (and unwrap) additional arguments,
299+
which scalajs-react conventionally designates as P for props, C for propsChildren, and S for State
300+
(see table below). The uppercase is not an accident: all of these are the types of generic arguments
301+
explicitly or implicitly given to ReactComponentB.
302+
303+
These additional `render*` functions are convenience functions, as all of these additional arguments can be
304+
found as members of the CompState argument.
305+
306+
E.g.:
307+
308+
.render { $ =>
309+
val P = $.props
310+
val C = $.propsChildren
311+
val S = $.state
312+
313+
<.div()
314+
}
315+
316+
is equivalent to:
317+
318+
.renderPCS { ($, P, C, S) =>
319+
<.div()
320+
}
321+
322+
|Method|Argument|Example|
323+
| --- | --- | --- | --- |
324+
|renderPCS|Function taking CompState, props, children, state|`.renderPCS { ($, P, C, S) => <.div() }`|
325+
|renderPC|Function taking CompState, props, children|`.renderPC { ($, P, C) => <.div() }`|
326+
|renderPS|Function taking CompState, props, state|`.renderPS { ($, P, S) => <.div() }`|
327+
|renderP|Function taking CompState, props|`.renderP { ($, P) => <.div() }`|
328+
|renderCS|Function taking CompState, children, state|`.renderCS { ($, C, S) => <.div() }`|
329+
|renderC|Function taking CompState, children|`.renderC { ($, C) => <.div() }`|
330+
|renderS|Function taking CompState, state|`.renderS { ($, S) => <.div() }`|
331+
332+
`render*` function overloads *with* an underscore take a function which takes has only that single part of the
333+
CompState called out in the function name. The CompState itself is not passed to the function passed.
334+
335+
|Method|Argument|Example|
336+
| --- | --- | --- | --- |
337+
|render_P|Function taking only props|`.render_P { P => <.div() }`|
338+
|render_C|Function taking only children|`.render_C { C => <.div() }`|
339+
|render_S|Function taking only state|`.render_S { S => <.div() }`|
340+
341+
342+
288343

289344
Similarly the `initialState` methods have been revised both
290345
1. To be consistent with the pattern used in `render` methods

0 commit comments

Comments
 (0)