在 table 可重用组件中附加 tr

Question

我有一个 table 组件

Table 组件

       <table>
         <thead>
            <tr>
              <th>{this.props.th1}</th>
              <th>{this.props.th2}</th>
              <th>{this.props.th3}</th>
            </tr>
          </thead>
      </table>

在 App.js 中，我正在调用 Table 组件，

               <Table th1="one"  th2="two" th3="three">
                  <tbody>
                      <tr>
                        <td>sample 1</td>
                        <td>sample 2</td>
                        <td>sample 3</td>
                      </tr>
                   </tbody>
                </Table>

但是我无法在 Table 中看到 tbody，我该怎么做呢。

非常感谢

Answer 1

你忘了 this.props.children 。实际上，您将 <tbody /> 作为 <Table /> 的 child 注入：

  <table>
     <thead>
        <tr>
          <th>{this.props.th1}</th>
          <th>{this.props.th2}</th>
          <th>{this.props.th3}</th>
        </tr>
      </thead>
      {this.props.children}
  </table>

Answer 2

tbody 作为 children 道具传递给 Table 组件，因此您需要更改 Table 组件以渲染子组件。

为什么 tbody 作为 children 属性传递给 Table？

In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: props.children.

你将不得不做

<table>
     <thead>
        <tr>
          <th>{this.props.th1}</th>
          <th>{this.props.th2}</th>
          <th>{this.props.th3}</th>
        </tr>
      </thead>
      {this.props.children}
  </table>

在 table 可重用组件中附加 tr

Attaching tr inside a table reusable component

children

reactjs