You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+23-5Lines changed: 23 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -66,7 +66,7 @@ The syntax for writing components is based off of JSX, and is referred as 'CX' w
66
66
67
67
### Elements
68
68
69
-
An element consists of a name, some attributes, and some children:
69
+
An element consists of an identifier, some attributes, and some children:
70
70
```xml
71
71
<Example />
72
72
<Examplefoo="bar" />
@@ -76,6 +76,7 @@ An element consists of a name, some attributes, and some children:
76
76
<Child2 />
77
77
{DateTime.UtcNow}
78
78
</Parent>
79
+
<{interpolation}.Foo />
79
80
```
80
81
81
82
Valid children of an element are:
@@ -622,9 +623,6 @@ var button = cx(
622
623
);
623
624
```
624
625
625
-
> [!NOTE]
626
-
> You can't use string interpolations for element identifiers
627
-
628
626
Most components have constraints on what type of value is allowed (ex select.min should be an integer) and diagnostics will be reported on type mismatches
629
627
630
628
```tsx
@@ -706,7 +704,7 @@ You can define basic custom components which can be used within the CX syntax. A
706
704
### Functional components
707
705
708
706
A functional component is a function that is:
709
-
-`static`.
707
+
-`static` or instanced qualified.
710
708
- either `public` or `internal`.
711
709
- returns a valid interpolation component type.
712
710
@@ -735,6 +733,26 @@ public static CXMessageComponent SayHello(User)
735
733
);
736
734
```
737
735
736
+
#### Instanced functional components
737
+
738
+
You can specify an instance by qualifying the identifier of the functional component with an interpolation of the instance:
739
+
740
+
```cs
741
+
742
+
varinstance=newMyClass();
743
+
744
+
varcomponent=cx($"""
745
+
<container>
746
+
<{instance}.MyComponent />
747
+
</container>
748
+
""");
749
+
750
+
publicclassMyClass()
751
+
{
752
+
publicCXMessageComponentMyComponent() =>...;
753
+
}
754
+
```
755
+
738
756
> [!TIP]
739
757
> You can use default values for parameters to indicate an optional property.
0 commit comments