Reactjs

Question

我遇到了这个问题，如果我在 React 中将不同的列布局应用于不同的行，它会弄乱其他行的列布局。例如，SpecialRows 是我要显示的 table 中的行。 SpecialBar 是存在于 table 上方的栏，其中包含其他内容，如过滤、搜索等。 SpecialBar 的列布局与 SpecialRow 不同，但是当我这样做时，SpecialRow 的列现在模仿 SpecialBar 的列并将所有数据压缩到对。

知道会发生什么吗？

class Table1 extends React.Component {
    <Table>
        <tbody>
            <SpecialBar {...this.props}/>
            {this.props.moreRows.map((row) => 
                <SpecialRow {...this.props} />
            )}
         </tbody>
    </Table>
}

class SpecialBar extends React.Component {
    render() {
        return (
            <tr>
                <td className='col-md-1'>Text A</td>
                <td className='col-md-10>Text B</td>
                <td className='col-md-1>Text C</td>
            </tr>
        );
    }
}

class SpecialRow extends React.Component {
    render() {
        return (
            <td className='col-md-2'>Stuff</td>
            <td className='col-md-2'>Stuff</td>
            <td className='col-md-2'>Stuff</td>
            <td className='col-md-2'>Stuff</td>
            <td className='col-md-1'>Stuff</td>
            <td className='col-md-1'>Stuff</td>
            <td className='col-md-1'>Stuff</td>
            <td className='col-md-1'>Stuff</td>
        );
    }
}

Answer 1

Any idea what may be happening?

第一行第二个单元格的宽度 (col-md-10) 正在设置后续行中所有第二个单元格的宽度。这就是表格的工作原理。

您可以通过给 col-md-10 单元格一个 colspan="10" 来解决它。对具有 col-md-2 的单元格执行相同操作，给它们 colspan="2".

Reactjs - table 行上的不同列布局会影响其他 table 行

Reactjs - Different columns layouts on table row affects other table rows

react-bootstrap