0

我想要一个父组件来管理应用程序的中心状态并将相关信息传递给它的子组件，并根据需要重新渲染它们。这就是我在 Stencil 中理解父/子通信的方式——父母通过属性向孩子发送数据，孩子通过事件向父母发送数据。这个假设是错误的吗？

我在网上找不到不引用 React 特定 API 的相关示例时遇到问题

编辑：在我的情况下，父级渲染一个带有插槽的包装器组件可能是相关的。代码示例已更新以反映...

简化示例：

父.tsx：

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

@Component({
  tag: 'parent',
  styleUrl: 'parent.css',
})
export class Parent {
  @State() selectedFeature: any = null;

  @Listen('featureClicked', { target: 'body' })
  updateSelectedFeature(e: CustomEvent) {
    this.selectedFeature = e.detail;
  }

  render() {
    return [
      <wrapper>
        <child slot="content" selected-feature={this.selectedFeature}></child>
      </wrapper>,
      // ...other components
    ];
  }
}

child.tsx:

// Child Component
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'child',
  styleUrl: 'child.css',
})
export class Child {
  @Prop() selectedFeature!: any;

  render() {
    if (!this.selectedFeature) return null;

    return (
      <ul>
        {
          Object.entries(this.selectedFeature.attributes)
            .map((key, val) => <li>{key}: {val}</li>)
        }
      </ul>
    );
  }
}

单击新功能时，我希望子组件显示它。目前，我无法做到这一点，除非：

  • 我在第一次渲染时传递了一个有效的功能（它正确渲染一次）
  • 在子级中有一个侦听器以从 DOM 中捕获所选功能

有没有办法在孩子不听事件的情况下做到这一点？

提前致谢。

4

2 回答 2

0

我找到了适合我需要的解决方法，即使用@stencil/store.

文档：https ://stenciljs.com/docs/stencil-store

示例：https ://github.com/ionic-team/stencil-store/tree/master/test-app

依赖于此状态的组件将在状态更改时重新渲染，这很好。

不将此标记为已解决，因为它没有解决原始问题。

于 2022-02-17T18:25:19.170 回答
0

你的假设是对的。通过 props 传递状态并发出事件，并让监听器监听这些事件。

道具在组件内是不可变的，但如果你想让它可变，stencil 提供

 @Prop({ mutable: true }) propertyThatIsMutable;

还要检查

@Prop({ reflect: true }) propToReflect; // will reflect as a attribute in DOM.
于 2022-02-17T15:54:10.753 回答