Я хочу сделать в lwc:

< a href...>
content1
< /a>

Или

< button oncli...>
content1
< /button>

Content1 состоит примерно из 30 строк кода. Я не хочу просто использовать if:true if:false и вставлять один и тот же контент в два тега, я ищу что-то вроде этого: если true - напечатать < a> с content1, если false, напечатать < button> с content1. В этом случае я не могу извлечь content1 в отдельный файл. Можно ли условно отобразить первый или второй тег в зависимости от переменной или сохранить этот контент и каким-то образом использовать его в этих тегах (например, в слотах)?

0
Oleksandr Berehovskyi 26 Ноя 2021 в 17:02

1 ответ

Лучший ответ

Если вы не хотите перемещать content1, вы можете создать компонент-оболочку для настройки кнопки/якоря:

<template>
  <button if:true={isButton}>
    <slot></slot>
  </button>
  <a href={href} if:true={isLink}>
    <slot></slot>
  </a>
</template>

import { api, LightningElement } from 'lwc'

export default class ContentWrapper extends LightningElement {
  @api href
  @api isButton
  @api isLink
  
}

Вот демонстрация.

К сожалению, это единственный другой жизнеспособный метод в LWC. Вы должны поместить либо обертку, либо содержимое в отдельный компонент. Обратите внимание, что нативные HTML-события автоматически всплывают наверх, поэтому вы все равно можете поместить свой щелчок в родительский компонент. Однако вам также нужно будет проверить, находитесь ли вы в настоящее время в режиме ссылки или кнопки отдельно в этот момент, чтобы определить, следует ли обрабатывать щелчок.

1
sfdcfox 26 Ноя 2021 в 19:02