オブジェクト の値が rows prop 自体はタイプ ‘object’ です。これを行うために、子 TableRow コンポーネントをレンダリングする親 Table コンポーネントがあり、SubTable コンポーネントまたは TableInnerSquare コンポーネントの条件付きレンダリングを行います。
これまでのところ、基本条件 [rows オブジェクトのプロパティが単純な場合] では完全に機能しますが、サブテーブルをレンダリングしようとすると、TableRows が 幅をオーバーフローします彼らのコンテナと私はこれが起こらないようにする方法を理解できません.
表コンポーネント:
function Table(props) {
const { 行、列、tableWidth、rowHeight } = props;
// ここの行は、列名をキーとするプロパティを持つオブジェクトを含む行の配列である必要があります
// 列は列名の配列でなければなりません
戻る （
{ column.map((column,idx) => {
戻る （
{ 桁 }
);
}) }
{ rows.map((row,idx) => {
戻る （
);
}) }
);
};
TableRow コンポーネント:
function TableRow(props) {
const { 列、行、rowId、tableWidth、rowHeight } = props;
// 行は、各列のキーを持つオブジェクトである必要があります。
// 列は配列でなければなりません
console.log('列:');
console.log(列);
console.log('row:');
console.log(行);
戻る （
{ column.map((property,idx) => {
if (typeof (row[プロパティ]) === 'オブジェクト') {
戻る （
);
} そうしないと {
戻る （
);
}
}) }
);
}
サブテーブル:
function SubTable(props) {
const { dataObject, rowHeight } = props;
console.log('dataObject:');
console.log(データオブジェクト);
戻る （
{ Object.entries(dataObject).map((entry,idx) => {
戻る （
);
}) }
);
}
TableInnerSquare:
function TableInnerSquare(props) {
const { innerData, rowHeight } = props;
戻る （
{インナーデータ}
);
}
SubTable を含む TableRow を幅 tableWidth に制限する方法を理解するための助けTableInnerSquare を含む
は既に実行しているように見えますか? ] よろしくお願いします!
div に overflow: hidden を設定できますが、その親 div は引き続きコンテンツを存在として認識し、それを含むように拡張します。サブテーブルのために、クラス sub-table [コンポーネント SubTable 内] で div に overflow: hidden を設定する必要があります。内部 div のオーバーフローを非表示にします。