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

【问题标题】：How to define global variables in stencil.js/tsx?如何在 stencil.js/tsx 中定义全局变量？
【发布时间】：2019-11-11 18:28:06
【问题描述】：

如何在 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 变量，这样我就可以在两个函数中使用它。

【问题讨论】：

标签： javascript typescript jsx stenciljs

【解决方案1】：

根据 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');
  }

【讨论】：

【解决方案2】：

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

    @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');
        }

希望对你有帮助:)

【讨论】：

这被认为是一种黑客行为还是正确的做法？我对 JSX 和 States 不是很熟悉，但是由于 State 不会改变（因此不会重新渲染），我认为它可以吗？
这是正确的做法。不是解决方法或破解。 :)
嘿，我这样做时出错：ReferenceError: editable is not defined 如果我尝试使用 this.editable 它也会给我一个错误
啊，你找到了正确的解决方案:) 如果你想在第一次渲染之前设置它，在 componentWillLoad 方法中启动它。