Question

我有这个问题，如果我将不同的列布局应用于React中的不同行，它会弄乱其他行的列布局。例如，SpecialRows是我想要显示的表中的行。 SpecialBar是存在于表格上方的栏，其中包含过滤，搜索等内容。 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

知道可能发生的事情吗？

发生的事情是第一行（col-md-10）的第二个单元格的宽度设置了以下行中所有第二个单元格的宽度。这就是表的工作方式。

您可以通过为col-md-10单元格colspan="10"提供帮助来解决此问题。对具有col-md-2的单元格执行相同操作，并为其colspan="2"。

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

1 个答案: