javascript - 如何在 React js 中的表格网格中显示键值对?
问题描述
我正在尝试在反应 js 中显示键值对,
但不知何故我无法正确显示它们。我创建了一个表格小部件,但没有得到正确的显示
我的表小部件
import React from "react";
function Table(props) {
const { tablevalue } = props;
console.log(tablevalue);
return (
<div className="table">
<table className="table table-hover">
<tbody>
{tablevalue.map((item, value) =>
Object.entries(item, (key, value) => {
return (
<tr className="table-row">
<th scope="col" key={`tablevalue-${key}`}>
{key}
</th>
<td key={`tablevalue-${value}`}>{value}</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
);
}
export default Table;
应用程序.js
import React, { Fragment } from "react";
import Dropdown from './components/widgets/Dropdown/index'
import Table from './components/widgets/Table/index'
function DropdownTest() {
return (
<h3>
<b>Profit</b>
</h3>
<br />
<Table
tablevalue = {[{key:'Binance' , value: 'Polonix'}, {key:'Profit' , value:'Loss'}]}
/>
</div>
);
}
export default DropdownTest;
而我希望我的输出以表格形式显示
解决方案
您可以使用表头
<tbody>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
{tablevalue.map(({ key, value }) => (
<tr className="table-row">
<td key={`tablevalue-${key}`}>{key}</td>
<td key={`tablevalue-${value}`}>{value}</td>
</tr>
))}
</tbody>
代码
const Table = ({ tablevalue }) => (
<div className="table">
<table className="table table-hover">
<tbody>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
{tablevalue.map(({ key, value }) => (
<tr className="table-row">
<td key={`tablevalue-${key}`}>{key}</td>
<td key={`tablevalue-${value}`}>{value}</td>
</tr>
))}
</tbody>
</table>
</div>
);
const DropdownTest = () => (
<div>
<h3>
<b>Profit</b>
</h3>
<br />
<Table
tablevalue={[
{ key: "Binance", value: "Polonix" },
{ key: "Profit", value: "Loss" }
]}
/>
</div>
);
ReactDOM.render(
<React.StrictMode>
<DropdownTest />
</React.StrictMode>,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- php - 使用 PhpSpreadSheet 写入 excel 文件非常慢
- java - 尽管变量的类型被声明为双精度,为什么 java 会给出一个 int 太大的错误?
- abap - OpenSQL 语法 CASE 语句中的 WHERE 条件
- java - 查找在数据库中如何工作?
- selenium - 硒 - findElement
- php - (PHP/MySQL)如何将新地址设置为“新”默认值并取消设置前一个地址?
- http - Ballerina:在启动入站响应之前触发空闲超时
- mysql - MySQl:如何分组('年')日期格式的列,忽略月份和日期
- ios - 项目选择器未在 xcode 中显示
- python - Python 正则表达式不匹配“,”或字符串结尾