Javascript 如何在stencil.js/tsx中定义全局变量？

如何在Stencil.js组件中定义全局变量

@ClickOutside()
  someMethod() {
    let editable = this.el.querySelector('.editable');
    if (this.el.classList.contains('is-open')) {
      this.el.classList.toggle('is-open');
      editable.setAttribute('contenteditable',
        editable.getAttribute('contenteditable') === 'true' ? 'false' : 'true');
    }
  }

  openToolbar() {
    let editable = this.el.querySelector('.editable');
    if (editable.getAttribute('contenteditable') === 'true') {
      return
    }
    this.el.classList.toggle('is-open');
    editable.setAttribute('contenteditable',
      editable.getAttribute('contenteditable') === 'true' ? 'false' : 'true');
  }

---

这正如预期的那样工作，但是我在两个不同的函数中重复我自己。我想在外部定义第一个let变量，以便在两个函数中都使用它。

您可以将其设置为如下状态

    @State() editable;

    componentWillLoad() {
       this.editable = this.el.querySelector('.editable');
    }

    @ClickOutside()
        someMethod() {
            if (this.el.classList.contains('is-open')) {
                this.el.classList.toggle('is-open');
                editable.setAttribute('contenteditable',
                editable.getAttribute('contenteditable') === 'true' ? 'false' : 'true');
             }
        }

        openToolbar() {
            if (editable.getAttribute('contenteditable') === 'true') {
                return
            }
            this.el.classList.toggle('is-open');
            editable.setAttribute('contenteditable',
            editable.getAttribute('contenteditable') === 'true' ? 'false' : 'true');
        }

---

希望这能对你有所帮助：）

根据Koga的建议，这对我很有效：

@State() editable;

  componentDidLoad() {
    this.editable = this.el.querySelector('.editable');
  }

  @ClickOutside()
  someMethod() {
    if (this.el.classList.contains('is-open')) {
      this.el.classList.toggle('is-open');
      this.editable.setAttribute('contenteditable',
        this.editable.getAttribute('contenteditable') === 'true' ? 'false' : 'true');
    }
  }

  openToolbar() {
    if (this.editable.getAttribute('contenteditable') === 'true') {
      return
    }
    this.el.classList.toggle('is-open');
    this.editable.setAttribute('contenteditable',
      this.editable.getAttribute('contenteditable') === 'true' ? 'false' : 'true');
  }

---

这被认为是黑客行为还是正确的做法？我不太熟悉JSX和状态，但由于状态不会改变（因此不会重新渲染），我认为这是正确的方法。不是一个解决方法或黑客。：）嘿，我在这样做时遇到了一个错误：ReferenceError:如果我尝试使用此方法，则未定义editable。editable它还会给我一个错误您找到了正确的解决方案：）如果要在第一次渲染之前设置它，请在componentWillLoad方法中启动它。