我需要在同一个表格中显示3种不同字段的数据类型。为此,我希望有3个标题,每个标题都有不同的颜色。
我使用 Bootstrap 来做我的设计,我的代码是在Javascript与React。
我写了下面的代码来完成这个任务(我试图简化它,但是它通常是可重复的)
import * as React from "react";
import { useEffect, useState } from "react";
import { nanoid } from "nanoid";
//props object
type IPropsTable={
currentDatas: (DataType1 | DataType2 | DataType3 | undefined;
}
const TableRequest: React.FC<IPropsTable> = ({ currentDatas }) => {
const [existData1, setExistData1] = useState(false);
const [existData2, setExistData2] = useState(false);
const [existData3, setExistData3] = useState(false);
useEffect(()=>{
if (currentDatas) {
currentDatas.map((currentData) => {
if (currentData.type === "data1") {
setExistData1(true);
} else if (currentData.type === "data2") {
setExistData2(true);
} else if (currentData.type === "data3") {
setExistData3(true);
}
})
}
},[currentDatas])
function renderTableHeaderData1() {
let header = ['someField1', 'someField2']
return header.map((key, index) => {
return <th key={index} scope="col">{key.toUpperCase()}</th>
})
}
function renderTableHeaderData2() {
let header = ['someOtherField1', 'someOtherField2']
return header.map((key, index) => {
return <th key={index} scope="col">{key.toUpperCase()}</th>
})
}
function renderTableHeaderData3() {
let header = ['someOtherOtherField1', 'someOtherOtherField2']
return header.map((key, index) => {
return <th key={index} scope="col">{key.toUpperCase()}</th>
})
}
function renderTableData() {
if(currentDatas){
return currentDatas.map((session) => {
if (session.type === "data1") {
return (
<tr key={nanoid()} className="warning">
<td>{session.someField1}</td>
<td>{session.someField2}</td>
</tr>
)
} else if (session.type === "data2") {
return (
<tr key={nanoid()} className="info">
<td>{session.someOtherField1}</td>
<td>{session.someOtherField2}</td>
</tr>
)
} else if (session.type === "data3") {
return (
<tr key={nanoid()} className="success">
<td>{session.someOtherOtherField1}</td>
<td>{session.someOtherOtherField2}</td>
</tr>
)
}
})
} else{return undefined}
}
return (
<>
<div>
<table className="table table-sm">
<caption>Result Search</caption>
<thead>
{existData1?
<tr className="thead-warning">{renderTableHeaderData1()}</tr>
: <></>
}
{existData2?
<tr className="thead-info">{renderTableHeaderData2()}</tr>
: <></>
}
{existData3?
<tr className="thead-success">{renderTableHeaderData3()}</tr>
: <></>
}
</thead>
<tbody>
{renderTableData()}
</tbody>
</table>
</div>
</>
)
}
export default TableRequest;
正如您在上面的代码中所看到的,我为每个<tr>
(warning
用于data1,info
用于data2,success
用于data3)分配了一个css类。但是当呈现组件时,没有颜色出现,表完全是白色的,无论是三个标题中的每一个,还是表中每一行包含的数据。
我试着用thead-warning
,thead-info
和thead-success
类作为我的表头tr
css类,它们似乎更合适。但是同样的结果,没有颜色显示。
有没有人看到我做错了什么,可以引导我在正确的方向,我真的不明白我的问题在哪里。
2条答案
按热度按时间zujrkrfu1#
使用
<tr class="success">
或<tr class="warning">
(取决于您想要的颜色)。示例:
bsxbgnwa2#
我的问题是我用来给我的表着色的className的名称。通过使用bg-success而不是table-success,一切都正常工作。但是我不明白为什么table-success类不能像这个例子中那样工作:example with table-success