Table of Contents generated with DocToc
<using>
The <using>
structural component is a mechanism for creating variables in JSX. This allows you to create aliases for more complex expressions. It takes two attributes:
value
- the expression to evaluate.as
- the variable to assign the expression to. Note that this must be a free identifier - if you try to write an expression, you'll get an error.
Here's a simple example of <using>
, where we assign the expression this.name
to the variable name
:
@Component
export default class Component {
@Observable name;
render() {
return <g>
<label>Name: </label>
<input type="text" placeholder="Enter your name" bind:value={ this.name }/>
<using value={ this.name } as={ name }>
<h2>
Hello { name }!
</h2>
</using>
</g>
}
}
Note that if the value
expression evaluates to a falsy value (false
, 0
, null
, undefined
, ''
, NaN
), then the contents of the <using>
tag will not be rendered.
If you need to handle this case, an <else>
component can be used after <using>
, like the following:
@Component
export default class Component {
@Observable name;
render() {
return <g>
<label>Name: </label>
<input type="text" placeholder="Enter your name" bind:value={ this.name }/>
<using value={ this.name } as={ name }>
<h2>
Hello { name }!
</h2>
</using>
<else>
<h2>
Please enter your name.
</h2>
</else>
</g>
}
}
The scope of the variable defined with as
is limited to the contents of the <using>
- you can't use it elsewhere in the JSX, so you get proper scoping. If you have a nested <using>
that defines the same variable, then the innermost binding applies, as you'd expect:
export default <using value={ 2 } as={ name }>
<using value={ 3 } as={ name }>
Inner: { name }
</using>;
Outer: { name }
</using>;
One important use of <using>
is to help with dynamically switching components - the only thing to remember is that custom components must start with an upper case letter. Here's an example:
@Component
class MyButton {
render() {
return <button>Button</button>;
}
}
@Component
class MyTestButton {
render() {
return <button>Test Button</button>;
}
}
@Component
export default class MyComponent {
@Attribute isTest = false;
render() {
return <g>
<using value={ this.isTest ? MyTestButton : MyButton } as={ Button }>
<Button />
</using>
</g>;
}
}