React：如何正确地将表行渲染为表体内的组件？

Question

我在 React 应用程序中遇到一个问题，我正在使用组件渲染包含动态行的表。但是，行被视为单独的元素，而不是表体内的组件。

尽管使用组件动态生成行，但它们并未与表标题正确对齐。我尝试了各种方法，包括将每一行封装在其自己的元素中，但问题仍然存在。

1. 表头组件：

function TableHead({ rowCount }) {
  return (
    <div className='table-container'>
      <table>
        <thead>
          <tr>
            <th>S. No</th>
            <th>Subject</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr><InitialRender count={rowCount} /></tr>
        </tbody>
      </table>
    </div>
  );
}

2. 初始渲染组件：

function InitialRender({ count }) {
  const initialRows = [];
  for (let i = 0; i < count; i++) {
    initialRows.push(
      <TableRow key={i + 1} count={i + 1} />
    );
  }

  return initialRows;
}

3. TableRow 组件

function TableRow({ count }) {
  return (
    <tr>
      <td>{count}</td>
      <td><input type="text" placeholder='Enter subject' /></td>
      <td>
        <select name="" id="dropdown">
          <option value="">Grades</option>
          <option value="O">O</option>
          <option value="A+">A+</option>
          <option value="A">A</option>
          <option value="B+">B+</option>
          <option value="B">B</option>
          <option value="AB">AB</option>
        </select>
      </td>
    </tr>
  );
}

4. 应用程序组件：

function App() {
  const [rowCount, setRowCount] = useState(6);

  const handleAddRow = () => {
    setRowCount(prevCount => prevCount + 1);
  };

  return (
    <div className='form-container'>
      <form action=''>
        <TableHead rowCount={rowCount} />
        <InitialRender count={rowCount} />
        <div className='buttons'>
          <AddRow onAddRow={handleAddRow} />
          <Submit />
        </div>
      </form>
    </div>
  );
}

Answer 1

TableHead

组件已经将

InitialRender

作为子组件，并且您从

App

再次调用它。您需要从

<InitialRender count={rowCount} />

组件中删除

App

。

TableHead

会调用它。

const { useState } = React;


function App() {
  const [rowCount, setRowCount] = useState(6);

  const handleAddRow = () => {
    setRowCount(prevCount => prevCount + 1);
  };

  return (
    <div className='form-container'>
      <form action=''>
        <TableHead rowCount={rowCount} />
        <div className='buttons'>
          <TableRow onAddRow={handleAddRow} />
        </div>
        <button type='submit' />
      </form>
    </div>
  );
}

function TableRow({ count }) {
  return (
    <tr>
      <td>{count}</td>
      <td><input type="text" placeholder='Enter subject' /></td>
      <td>
        <select name="" id="dropdown">
          <option value="">Grades</option>
          <option value="O">O</option>
          <option value="A+">A+</option>
          <option value="A">A</option>
          <option value="B+">B+</option>
          <option value="B">B</option>
          <option value="AB">AB</option>
        </select>
      </td>
    </tr>
  );
}

function InitialRender({ count }) {
  const initialRows = [];
  for (let i = 0; i < count; i++) {
    initialRows.push(
      <TableRow key={i + 1} count={i + 1} />
    );
  }

  return initialRows;
}

function TableHead({ rowCount }) {
  return (
    <div className='table-container'>
      <table>
        <thead>
          <tr>
            <th>S. No</th>
            <th>Subject</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <InitialRender count={rowCount} />
        </tbody>
      </table>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div id="app"></div>