使用React呈现的嵌套弹性项div是否将其自身限制为同等/正确的大小

Question

我正试图在React中呈现一个自定义表组件，该组件将在其对象rows道具的值本身为"object"类型的情况下呈现[quot；linear"-relooking]子表，。要做到这一点，我有我的父表组件，它渲染子表行组件，然后对子表组件或TableInnerSquare组件进行条件渲染。

到目前为止，它完全适用于基本条件[当rows对象的属性很简单时]，但当我尝试渲染子表时，TableRows溢出了其容器的宽度，我不知道如何阻止这种情况的发生。

表组件：

function Table(props) {
const { rows, columns, tableWidth, rowHeight } = props;
// rows here should be an array of rows containing objects w/ properties keyed by column names
// columns should just be an array of column names
return (
<div className='g-table'
style={{
display: 'flex',
width: tableWidth,
flexDirection: 'column',
margin: '5% auto',
}}
>
<div className='column-id-container'
style={{
display: 'flex',
width: tableWidth,
height: rowHeight,
}}
>
{ columns.map((column,idx) => {
return (
<div className='column-id'
style={{
backgroundColor: 'lightblue',
border: '1px solid blue',
width: '100%',
overflow: 'hidden',
padding: '2%',
}}
key={idx}
>
{ column }
</div>
);
}) }
</div>
<div className='rows-container'>
{ rows.map((row,idx) => {
return (
<TableRow 
key={idx}
row={row}
rowId={idx}
tableWidth={tableWidth}
rowHeight={rowHeight}
columns={columns}
/>
);
}) }
</div>
</div>
);
};

TableRow组件：

function TableRow(props) {
const { columns, row, rowId, tableWidth, rowHeight } = props;
// row should be an object with keys for each column here;
// columns should be an array
console.log('columns:');
console.log(columns);
console.log('row:');
console.log(row);
return (
<div className='table-row'
style={{
display: 'flex',
width: tableWidth,
}}
>
{ columns.map((property,idx) => {
if (typeof (row[property]) === 'object') {
return (
<SubTable
dataObject={row[property]}
rowHeight={rowHeight} // so for the SubTablesTable the row should be an object of objects
key={idx}
/>
);
} else {
return (
<TableInnerSquare
innerData={row[property]}
rowHeight={rowHeight}
key={idx}
/>
);
}
}) }
</div>
);
}

子表：

function SubTable(props) {
const { dataObject, rowHeight } = props;
console.log('dataObject:');
console.log(dataObject);
return (
<div className='sub-table'
style={{
width: 'auto',
display: 'flex',
flex: '1',
}}
>
{ Object.entries(dataObject).map((entry,idx) => {
return (
<div className='sub-table-inner'
style={{
display: 'flex',
overflow: 'hidden',
}}
>
<TableInnerSquare
rowHeight={rowHeight}
innerData={entry[0]}
/>
<TableInnerSquare
rowHeight={rowHeight}
innerData={entry[1]}
/>
</div>
);
}) }
</div>
);
}

TableInnerSquare：

function TableInnerSquare(props) {
const { innerData, rowHeight } = props;
return (
<div 
className='table-inner-square'
style={{
backgroundColor: 'gold',
border: '1px solid red',
height: rowHeight,
overflow: 'hidden',
padding: '2%',
width: '100%',
}}
>
{ innerData }
</div>
);
}

如果您能帮助了解如何将包含SubTables的TableRow限制为宽度为tableWidth[就像我说的包含TableInnerSquares的TableRows似乎已经这样做了吗？]将不胜感激！

Answer 1

您可以在div上设置overflow: hidden，但其父div仍会将内容识别为存在并扩展为包含该内容。您需要在这里用类sub-table[在组件SubTable]在div上设置overflow: hidden，以便子表隐藏其内部div的溢出。