Question

我今天开始使用模具。我的项目中只有以下代码。 Docs说，如果更改用@state()装饰的Component成员，则组件将重新呈现。

对@State（）属性的任何更改都将导致再次调用组件渲染函数。

但是，即使这个简单的事情也不起作用。请咨询。

import {Component, State} from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @State() name:string = 'john';

  changeName(){
    this.name = "Peter";
    console.log('inside changeName');
  }

  render() {
    return <div>
      <p>{this.name}</p>
      <button onClick={this.changeName}>click</button>
    </div>;
  }
}

当我单击按钮inside changeName时，已登录，但视图中未看到对name的更改。

Answer 1

尝试将onClick更改为箭头功能：

<button onClick={() => this.changeName()}>click</button>

这保留了this的含义以引用您的课程。有关更多详细信息和示例，请参见https://stenciljs.com/docs/templating-jsx/#handling-user-input。

更改@state（）装饰属性时，模具不释放组件

1 个答案: