Question

因此，我陷入了聚合物3发光元件的问题，如下所示：

父页面：

return html`
  <element-a>
    ${props.items.map(item) => html`
      <element-b data="${item}"></element-b>`
    )}`
  </element-a>
.
.
.
constructor() {
  super();
  this.items = [
    {
      id: 0
      name: "albert"
    },
    ...
}

我试图在父页面（这是重复的<element-a>的列表）上获取<element-b>的子级，然后在<element-a>的模板中使用它

一个简单的element-b模板：

<div>
  <p>${data.id} ${data.name}</p>
</div>

element-a：

_render(props) {
  this._setHTMLs();
  return html`
    ${props.items.map((item) => html`
      ${item.html}
    `)}
  `}
.
.
.
_setHTMLs() {
  // somewhat getting the children and make a new array object
  // with 'id' and 'html' key to be repeated later on `items`
}

问题

它可以正常工作，但是当父元素上的商店状态发生变化时，当我需要设置'items'属性时。

_stateChanged(state) {
  this.items = state.someData.data;
}

以某种方式不起作用。

我看到<element-a>内的属性'data'在渲染时发生了一段时间的数据更改，方法是将console.log放在重复的div之前（我将其放在_setHTMLs()内），

element-a：

_render(props) {
  this._setHTMLs();
  return html`
    ${props.items.map((item) => html`
      ${item.html}
    `)}
  `}
_setHTMLs() {
  console.log(this.children);
  // somewhat getting the children and make a new array object
  // with 'id' and 'html' key to be repeated later on `items`
}

当我从浏览器控制台手动检查时，将data数组放入<element-a>内。

可以寻求帮助/建议，如果响应速度太慢，则表示抱歉。

聚合物3发光元素：使用动态模板获取子元素；

问题

0 个答案: