Reacthooks，通过一个输入框输入数字就显示相应几个table表格并在表格里添加不同的数据

好的，您可以使用 `useState` Hook 来实现这个功能，代码如下：

import React, { useState } from 'react';

function TableRenderer() {
  const [tableCount, setTableCount] = useState(0);
  const [tableData, setTableData] = useState([]);

  const handleInputChange = (event) => {
    const count = parseInt(event.target.value);
    setTableCount(count);
    setTableData(Array.from({ length: count }, (_, index) => `Table ${index + 1}`));
  };

  return (
    <div>
      <input type="number" value={tableCount} onChange={handleInputChange} />
      {tableData.map((data, index) => (
        <table key={index}>
          <thead>
            <tr>
              <th>{data}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Row 1, Col 1</td>
              <td>Row 1, Col 2</td>
            </tr>
            <tr>
              <td>Row 2, Col 1</td>
              <td>Row 2, Col 2</td>
            </tr>
          </tbody>
        </table>
      ))}
    </div>
  );
}

在这个例子中，我们使用了 `useState` Hook 定义了两个状态变量：`tableCount` 和 `tableData`。`tableCount` 表示用户输入的数字，`tableData` 则是一个数组，存储了每个表格的标题。

当用户在输入框中输入数字时，我们会通过 `handleInputChange` 函数来更新 `tableCount` 和 `tableData`。具体来说，我们使用 `Array.from` 方法根据 `tableCount` 来生成一个长度为 `tableCount` 的数组，并且使用 `index` 参数来为每个元素生成一个标题。最后，我们将这个数组设置为 `tableData` 的值。

在组件的 JSX 中，我们使用 `map` 方法遍历 `tableData` 数组，并为每个元素（即每个表格）渲染一个 `table` 元素。`thead` 中的 `tr` 元素包含了表格的标题，而 `tbody` 中的两个 `tr` 元素则包含了表格中的数据。这里我们只是简单地添加了两行数据，您可以根据实际需求来修改。

当用户在输入框中输入数字时，页面会自动更新，显示相应数量的表格并添加不同的数据。