Question

我有一个表组件

表组件

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

在我调用表组件的App.js中，

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

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

非常感谢提前

Answer 1

你忘记了php -i | grep memory_limit。实际上，您正在注射this.props.children作为<tbody />的孩子：

<Table />

Answer 2

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

为什么tbody以children道具传递给Table？

在包含开始标记和结束标记的JSX表达式中，这些标签之间的内容作为特殊道具传递： 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>

将tr附加到表可重用组件中

2 个答案: