我在我的React应用程序中遇到了一个问题,我正在使用组件渲染包含动态行的表.然而,这些行被视为单独的元素,而不是表体内的组件.
尽管使用组件动态生成行,但它们并未与表格标题正确对齐.我try 过各种方法,包括将每一行封装在其自己的元素中,但问题仍然存在.
- 桌面组件:
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>
);
}
- 初始渲染组件:
function InitialRender({ count }) {
const initialRows = [];
for (let i = 0; i < count; i++) {
initialRows.push(
<TableRow key={i + 1} count={i + 1} />
);
}
return initialRows;
}
- Table Row组件
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 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>
);
}