在ReactJS中显示表中特定单元格中的Json数据

Question

(我在编程方面非常初级)我有一个Json文件包含模型数据看起来像这样:

[{"id":1,"hour":15,"task":"Hotel Whiskey Charlie Yankee Quebec Uniform Mike Alfa Kilo Papa","location":"Tango Victor Mike Papa Kilo Delta Sierra Oscar Echo Alfa Zulu Quebec"},
{"id":2,"hour":23,"task":"Victor Tango Echo November Juliett Yankee Romeo Quebec Hotel Lima Zulu Delta","location":"Romeo Golf Kilo Echo X-ray Hotel Foxtrot Bravo India Quebec Charlie Mike Papa Lima Juliett Oscar Alfa Zulu Uniform"},
{"id":3,"hour":14,"task":"Kilo November Juliett X-ray Lima Uniform Whiskey India Oscar Mike Echo Sierra Romeo Hotel Foxtrot","location":"Quebec Alfa Zulu Charlie Uniform Mike Lima November Tango Golf Hotel Whiskey Oscar Echo"},
{"id":4,"hour":18,"task":"Lima Papa Sierra Alfa Hotel Romeo Delta Uniform Echo Foxtrot November X-ray","location":"Foxtrot India Lima Whiskey November Delta Uniform Mike Oscar Victor Yankee Juliett X-ray Golf Hotel Tango Alfa Romeo Charlie"}]

我有一个表包含一天中的小时在一个ReactJS组件。我设法在单元格中导入一些数据，但我试图在Json文件中指定的一天的特定时间影响数据。

如果我在Json中得到"hour":8我希望它显示在表的8h-9h单元格下

这是我的表:

import Mockup from '../data/MOCK_DATA.json';
const DailyTable = () => {
return(
<table id="simple-board">

<tbody id='tbody'>
<tr>
<td id='head' colspan='24'>Planning journalier du {date}</td>
</tr>
<tr id="collapse">
<td id="cell">0h-1h</td>
<td id="cell">1h-2h</td>
<td id="cell">2h-3h</td>
<td id="cell">3h-4h</td>
<td id="cell">4h-5h</td>
<td id="cell">5h-6h</td>
<td id="cell">6h-7h</td>
<td id="cell">7h-8h</td>
<td id="cell">8h-9h</td>
<td id="cell">9h-10h</td>
<td id="cell">10h-11h</td>
<td id="cell">11h-12h</td>
</tr>
<tr>
<td id="cell2">
{Mockup.map((timex, prootex)=>{
return( <h1>{timex.hour}</h1>)
})}
</td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
</tr>
<tr id='collapse'>
<td id="cell">12h-13h</td>
<td id="cell">13h-14h</td>
<td id="cell">14h-15h</td>
<td id="cell">15h-16h</td>
<td id="cell">16h-17h</td>
<td id="cell">17h-18h</td>
<td id="cell">18h-19h</td>
<td id="cell">19h-20h</td>
<td id="cell">20h-21h</td>
<td id="cell">21h-22h</td>
<td id="cell">22h-23h</td>
<td id="cell">23h-00h</td>
</tr>
<tr>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
<td id="cell2"></td>
</tr>
</tbody>

</table>
)
}

我想这与细胞的id有关。例如，如果Json中的'hour'等于单元格的id，则打印单元格中的数据。

如果你能帮助我，我会很感激的。

谢谢你的时间，伙计们:)

Answer 1

这里有一个完整的示例，您应该避免重复的代码，所以我写了一些代码来生成小时和任务。

const Mockup = [
{
id: 1,
hour: 15,
task: "Hotel Whiskey Charlie Yankee Quebec Uniform Mike Alfa Kilo Papa",
location:
"Tango Victor Mike Papa Kilo Delta Sierra Oscar Echo Alfa Zulu Quebec"
},
{
id: 2,
hour: 23,
task:
"Victor Tango Echo November Juliett Yankee Romeo Quebec Hotel Lima Zulu Delta",
location:
"Romeo Golf Kilo Echo X-ray Hotel Foxtrot Bravo India Quebec Charlie Mike Papa Lima Juliett Oscar Alfa Zulu Uniform"
},
{
id: 3,
hour: 14,
task:
"Kilo November Juliett X-ray Lima Uniform Whiskey India Oscar Mike Echo Sierra Romeo Hotel Foxtrot",
location:
"Quebec Alfa Zulu Charlie Uniform Mike Lima November Tango Golf Hotel Whiskey Oscar Echo"
},
{
id: 4,
hour: 18,
task:
"Lima Papa Sierra Alfa Hotel Romeo Delta Uniform Echo Foxtrot November X-ray",
location:
"Foxtrot India Lima Whiskey November Delta Uniform Mike Oscar Victor Yankee Juliett X-ray Golf Hotel Tango Alfa Romeo Charlie"
}
];
const PrepareAppointment = ({ from, to }) => {
const task = Mockup.find((f) => f.hour >= from && f.hour < to);
return task ? (
<span>
<p>
<span>task:</span>
{task.task}
</p>
<p>
<span>location:</span>
{task.location}
</p>
</span>
) : (
<span></span>
);
};
function DailyTable () {
const list = [];
for (let i = 0; i < 24; i++) {
list.push(
<td>
<div className="hour">
{i}h-{i + 1}h
</div>
<div className="task">
<PrepareAppointment from={i} to={i + 1} />
</div>
</td>
);
}
return (
<div className="App">
<table id="simple-board">
<tbody id="tbody">
<tr>
<td id="head" colspan="24">
Planning journalier du Date
</td>
</tr>
<tr>
{list.map((m) => (
<span>{m}</span>
))}
</tr>
</tbody>
</table>
</div>
);
}

ReactDOM.render( <DailyTable/> ,
document.getElementById("root")
);

.App {
font-family: sans-serif;
text-align: center;
}
.simple-board {
display: flex;
}
tr td {
border: solid 1px #aaa;
border-radius: 4px;
padding: 1em;
}
p span {
font-weight: bold;
}
.hour {
font-weight: bold;
}
.task {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

好吧，先更正一下。"colspan"应该改为"colSpan"(大写S)在ReactJS。其次，你为你的"计划记者"指定一个24的colSpan。标题，但你有2行，每行12个单元格。您必须决定是要1行24单元格，还是2行12单元格。这是我的解。我假设你有两行，每行12个单元格。该示例是针对小时0-12，您可以轻松地将其扩展为包括小时12-24:

const hours = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
return (
<table id="simple-board">
<tbody id="tbody">
<tr>
<td id="head" colSpan="12">
Planning journalier du {date}
</td>
</tr>
<tr id="collapse">
<td id="cell">0h-1h</td>
<td id="cell">1h-2h</td>
<td id="cell">2h-3h</td>
<td id="cell">3h-4h</td>
<td id="cell">4h-5h</td>
<td id="cell">5h-6h</td>
<td id="cell">6h-7h</td>
<td id="cell">7h-8h</td>
<td id="cell">8h-9h</td>
<td id="cell">9h-10h</td>
<td id="cell">10h-11h</td>
<td id="cell">11h-12h</td>
</tr>
<tr>
{hours.map((h) => (
<td key={h} id="cell2">
{
Mockup.filter(m => {return m.hour===h}).map(m => m.task).toString()
}
</td>
))}
</tr>
</tbody>
</table>
);

本质上你通过小时循环，过滤掉发生在这一小时的任务，然后将这些任务的任务描述并将其显示为字符串:例如任务描述1，任务描述2

Answer 3

在<tr>之前使用map函数，以便您的行在每个数组索引上重复。并使用与标题中相同的数字<td>。这样所有的数据在右列

都是可见的: -

<Table bordered hover responsive>
<thead>
<tr>
<th>S. No</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{userData.map((ele, index) => {
return (
<tr key={index}>
<td>
{pageData?.perPage * (pageData?.page - 1) +
index +
1}
</td>

<td>{ele?.name}</td>
<td>{ele?.email}</td>
</tr>
);
})}
</tbody>