构建一个简单的表格组件答案

【问题标题】：Building a simple table component构建一个简单的表格组件
【发布时间】：2018-12-16 05:57:46
【问题描述】：

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

表格的编码如下所示：

@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 作为子元素。构建两个组件（一个用于表，一个用于行）的正确方法是什么？

非常感谢！

【问题讨论】：

是的，HTML <table> 元素不允许自定义元素作为子元素：stackoverflow.com/a/45765748/27557。不幸的是，我不知道是否有办法为行构建自定义元素。
好的，谢谢！

标签： tsx stenciljs

【解决方案1】：

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

不过，您可以使用函数式组件作为子行，similar to 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 组件中使用它们。

【讨论】：

如何从功能组件发出事件？