0

我想构建两个组件，一个用于表格，一个用于每一行。

表的编码如下所示：

@Component({
  tag: 'wb-overview-table',
})
export class WorkbookOverviewTable {
  items: Array<any>;

  constructor() {
    this.items = [ { id: 1, name: "asd" }, { id: 2, name: "qwes" } ];
  }

  render() {
    return (
      <table>
        {this.items.map(item => {
          return (
            <wb-overview-table-row item={item}></wb-overview-table-row>
          );
        })}
      </table>
    );
  }
}

行的编码如下所示：

@Component({
    tag: 'wb-overview-table-row',

})
export class WorkbookOverviewTableRow {
    @Prop() item: any;

    render() {
        return (
            <tr>
                <td>{this.item.id}</td>
                <td>{this.item.name}</td>
            </tr>
        );
    }
}

呈现的 html 如下所示：

<wb-overview-table class="hydrated">
   <table>
      <wb-overview-table-row class="hydrated">
         <tr>
            <td>1</td>
            <td>asd</td>
         </tr>
      </wb-overview-table-row>
      <wb-overview-table-row class="hydrated">
         <tr>
            <td>2</td>
            <td>qwes</td>
         </tr>
      </wb-overview-table-row>
   </table>
</wb-overview-table>

问题是，表的结构不正确。我明白为什么它会这样渲染。但我只是不知道如何正确呈现表格，因此 table-tag 将 tr-tags 作为子元素。构建两个组件的正确方法是什么，一个用于表，一个用于行？

非常感谢！

4

1 回答 1

3

HTML<table>元素不允许将自定义元素作为子元素，这意味着您不能直接使用 Stencil Web 组件。

但是，您可以使用功能组件作为子行，类似于 React：

export const WorkbookOverviewTableRow = props =>
        return (
            <tr>
                <td>{props.item.id}</td>
                <td>{props.item.name}</td>
            </tr>
        );
    }
}

在您的表格组件中：

  <table>
    {this.items.map(item => {
      return (
        <WorkbookOverviewTableRow item={item} />
      );
    })}
  </table>
);

这些是 Stencil 组件，但它们不会作为 Web 组件导出，因此您只能在其他 Stencil 组件中使用它们。

于 2018-07-09T22:27:56.317 回答