Aura コンポーネントのマークアップから Lightning Web コンポーネントの JavaScript に式を移行します。
以下は、Aura コンポーネントの構文です。
1<aura:if isTrue="{! (!v.something ? v.optionA : v.optionB) }">
2 <div>Conditional Code</div>
3</aura:if>Lightning Web コンポーネントでは、lwc:if を使用して、式を JavaScript に移行します。これでコードを単体テストできるようになります。HTML ファイルは次のようになります。
1<template>
2 <div lwc:if={condition}>Conditional Code</div>
3</template>Lightning Web コンポーネントの HTML ファイルの動的コンテンツの場合、getter の参照の周囲に引用符はなく、感嘆符や値プロバイダ (v.) 構文もありません。入力し慣れているかもしれませんが、Aura コンポーネントの式構文は使用しないでください。
以下は、Aura コンポーネントの式です。
1<aura:if isTrue="{!v.condition}">以下は、Lightning Web コンポーネントの同様の HTML です。
1<div lwc:if={condition}>Conditional Code</div>Tip
JavaScript ファイルを次に示します。
1import { LightningElement } from "lwc";
2export default class MyComponentName {
3 get condition() {
4 return something ? true : false;
5 }
6}関連トピック
The Japanese Summer '24 guide is now live
j