Question

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

表的编码如下：

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

非常感谢！

Answer 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组件中使用它们。

构建一个简单的表组件

1 个答案: