我是Reactjs的初学者。我想要的是，我有一个组件Datatable.js，我想通过配置单个JSON文件的数据在该组件中创建三个表，三个表应该只有一个组件，但条件是表中的值必须不同-每个表中的值都不同，例如-在第一个表中-姓名、电子邮件、号码;我希望通过在App.js中重复Datatable.js组件三次来执行所有这些操作，以便呈现三个表，而不是通过在Datatable.js中写入表元素三次来执行这些操作。
所以请告诉我该怎么做。
我已经在数据状态中获得了JSON值，我知道它可以通过map（）方法显示，但问题是如何在每个重复组件中发送这些JSON文件值，以及Datatable.js将如何获得它，以便值在每个表中以不同的方式显示，正如我上面提到的那样？
data.json
[
{
"person": {
"name": "Viswas Jha",
"avatar": "images/profile.jpg"
},
"city": "Mumbai",
"email": "vishwasjha@gmail.com",
"number": 123456,
"profession": "UI Designer"
},
{
"person": {
"name": "Damini Pandit",
"avatar": "images/profile.jpg"
},
"city": "Delhi",
"email": "daminipandit@gmail.com",
"number": 1345645,
"profession": "Front-end Developer"
},
{
"person": {
"name": "Nihal Lingesh",
"avatar": "images/profile.jpg"
},
"city": "Delhi",
"email": "nihallingesh@gmail.com",
"number": 12345689,
"profession": "UX Designer"
},
{
"person": {
"name": "Akash Singh",
"avatar": "images/profile.jpg"
},
"city": "Kolkata",
"email": "akashsingh@gmail.com",
"number": 1234566,
"profession": "Backend Developer"
}
]应用程序js
import Datatable from './Datatable';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import {useState, useEffect} from 'react';
import './App.css';
const fetchData = new Promise((myResolve, myReject) => {
let req = new XMLHttpRequest();
req.open('GET', "./data.json");
req.onload = function() {
if (req.status == 200) {
return myResolve(req.response);
} else {
return myReject("File not Found");
}
};
req.send();
});
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetchData.then((jsonData) => setData(JSON.parse(jsonData)));
}, []);
return (
<>
<Datatable Data = {data} />;
<Datatable Data= {data}/>;
<Datatable Data= {data}/>;
</>
);
}
export default App;数据表.js
import React from 'react';
import Grid from '@material-ui/core/Grid';
export default function Datatable({Data}) {
return (
<div className='main text-center '>
<h1 className='head py-3'>Datatable</h1>
<Grid container spacing={1} className='contain m-auto mt-5 ps-5 pb-4'>
<table className="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Number</th>
</tr>
</thead>
<tbody>
{
Data.map((elem, ind)=>{
return (
<tr key={ind}>
<td className='d-flex justify-content-between align-items-center'>
<img src={elem.person.avatar} alt="avatar"/>
{elem.person.name}</td>
<td>{elem.email}</td>
<td>{elem.number}</td>
</tr>
)
})
}
</tbody>
</table>
</Grid>
</div>
);
}
1条答案
按热度按时间tzdcorbm1#
用这个更新您的代码。
App.js
DataTable.js