我有这个映射和创建多个表的组件，问题是它都包含在一个<TableContainer>中。返回的映射和布局没有给我单独定制每个表的灵活性，原因有两个:
- 所有创建的表都包含在
<TableContainer>中 - 我不能单独访问每个表组件。
理想情况下，我有一个返回映射器，将每个表映射到它自己的标识表，每个表都有它自己的<TableContainer>，
我的JSON对象数据有4个数组的表数据。这意味着下面的代码，映射出四个不同的表。
export default function DataTables()
{
const classes = useStyles();
const { slug } = useParams();
const [data, setData] = useState([])
const getData = () => {
axiosInstance
.get('bucket/fin-data/' + slug)
.then(result => setData(result.data))
}
useEffect(() => {
getData()
}, [])
return (
<TableContainer component={Paper}>
{data.map((table) => {
return (
<Table className={classes.table} aria-label="simple table">
<TableHead>
{Object.keys(table[0]).map((ceil) => (
<TableCell align="right">{ceil}</TableCell>
))}
</TableHead>
<TableBody>
{table.map((row) => (
<TableRow>
{Object.keys(row).map((ceil) => (
<TableCell align="right">{row[ceil]}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
);
})}
</TableContainer>
);
}
这里有一些数据来复制这个问题:
[
[
{
"symbol":"CLX",
"industry":"Household/Personal Care",
"week52high":"$235.28",
"week52low":"$155.44",
"marketcap":"$24,057,580,961.00",
"pe_ratio":21,
"beta":0.26,
"dividend_yield":" 2.28%"
},
{
"symbol":"COST",
"industry":"Specialty Stores",
"week52high":"$386.80",
"week52low":"$270.45",
"marketcap":"$157,324,408,684.00",
"pe_ratio":36,
"beta":0.61,
"dividend_yield":" .77%"
},
{
"symbol":"HSY",
"industry":"Food: Specialty/Candy",
"week52high":"$158.28",
"week52low":"$109.58",
"marketcap":"$30,513,617,200.00",
"pe_ratio":26,
"beta":0.81,
"dividend_yield":" 2.13%"
},
{
"symbol":"K",
"industry":"Food: Major Diversified",
"week52high":"$70.27",
"week52low":"$52.19",
"marketcap":"$19,945,663,997.00",
"pe_ratio":17,
"beta":0.47,
"dividend_yield":" 3.88%"
},
{
"symbol":"KHC",
"industry":"Food: Major Diversified",
"week52high":"$35.21",
"week52low":"$19.35",
"marketcap":"$41,324,740,852.00",
"pe_ratio":-84,
"beta":0.95,
"dividend_yield":" 4.65%"
},
{
"symbol":"MDLZ",
"industry":"Food: Major Diversified",
"week52high":"$58.71",
"week52low":"$40.99",
"marketcap":"$80,389,448,908.00",
"pe_ratio":26,
"beta":0.85,
"dividend_yield":" 2.12%"
},
{
"symbol":"PEP",
"industry":"Beverages: Non-Alcoholic",
"week52high":"$148.30",
"week52low":"$101.67",
"marketcap":"$194,800,586,126.00",
"pe_ratio":28,
"beta":0.91,
"dividend_yield":" 2.82%"
},
{
"symbol":"PG",
"industry":"Household/Personal Care",
"week52high":"$143.42",
"week52low":"$95.34",
"marketcap":"$319,063,021,021.00",
"pe_ratio":23,
"beta":0.73,
"dividend_yield":" 2.42%"
}
],
[
{
"symbol":"CLX",
"enterprisevalue":"$25,978,580,961.00",
"enterprise_value_revenue":3.64,
"revenuepershare":56.69,
"debt_to_equity":6.08,
"ebitda":"$1,480,000,000.00",
"profitmargin":" 16.14%%",
"price_to_sales":3.37,
"price_to_book":21.58,
"put_call_ratio":0.76,
"employees":"8,800",
"revenue_per_employee":"$810,340.91"
},
{
"symbol":"COST",
"enterprisevalue":"$150,526,408,684.00",
"enterprise_value_revenue":0.87,
"revenuepershare":390.4,
"debt_to_equity":4.05,
"ebitda":"$7,484,000,000.00",
"profitmargin":" 2.50%%",
"price_to_sales":0.91,
"price_to_book":10.59,
"put_call_ratio":0.83,
"employees":"273,000",
"revenue_per_employee":"$680,822.83"
},
{
"symbol":"HSY",
"enterprisevalue":"$34,234,908,200.00",
"enterprise_value_revenue":4.26,
"revenuepershare":38.59,
"debt_to_equity":4.48,
"ebitda":"$2,071,538,000.00",
"profitmargin":" 14.87%%",
"price_to_sales":3.8,
"price_to_book":14.77,
"put_call_ratio":1.27,
"employees":null,
"revenue_per_employee":"$497,682.78"
},
{
"symbol":"K",
"enterprisevalue":"$26,899,663,997.00",
"enterprise_value_revenue":1.99,
"revenuepershare":39.36,
"debt_to_equity":6.22,
"ebitda":"$2,203,000,000.00",
"profitmargin":" 8.80%%",
"price_to_sales":1.47,
"price_to_book":6.55,
"put_call_ratio":0.84,
"employees":null,
"revenue_per_employee":"$397,911.76"
},
{
"symbol":"KHC",
"enterprisevalue":"$67,021,740,852.00",
"enterprise_value_revenue":2.6,
"revenuepershare":21.09,
"debt_to_equity":1.99,
"ebitda":"$6,217,500,000.00",
"profitmargin":" -1.92%%",
"price_to_sales":1.6,
"price_to_book":0.84,
"put_call_ratio":0.55,
"employees":"37,000",
"revenue_per_employee":"$665,221.77"
},
{
"symbol":"MDLZ",
"enterprisevalue":"$97,744,448,908.00",
"enterprise_value_revenue":3.73,
"revenuepershare":18.32,
"debt_to_equity":2.46,
"ebitda":"$4,544,000,000.00",
"profitmargin":" 11.99%%",
"price_to_sales":3.07,
"price_to_book":2.98,
"put_call_ratio":1.37,
"employees":"80,000",
"revenue_per_employee":"$327,450.00"
},
{
"symbol":"PEP",
"enterprisevalue":"$229,666,586,126.00",
"enterprise_value_revenue":3.35,
"revenuepershare":49.61,
"debt_to_equity":6.83,
"ebitda":"$12,292,000,000.00",
"profitmargin":" 10.27%%",
"price_to_sales":2.84,
"price_to_book":14.45,
"put_call_ratio":0.95,
"employees":"267,000",
"revenue_per_employee":"$256,767.79"
},
{
"symbol":"PG",
"enterprisevalue":"$338,222,021,021.00",
"enterprise_value_revenue":4.57,
"revenuepershare":30.04,
"debt_to_equity":2.49,
"ebitda":"$20,550,000,000.00",
"profitmargin":" 18.36%%",
"price_to_sales":4.31,
"price_to_book":6.75,
"put_call_ratio":0.81,
"employees":null,
"revenue_per_employee":null
}
],
[
{
"symbol":"CLX",
"rating_buy":" 13%",
"rating_overweight":" 19%",
"rating_hold":" 50%",
"rating_underweight":" 19%",
"rating_sell":" 0%",
"total_recs":16,
"rating_scale":" 2.75"
},
{
"symbol":"COST",
"rating_buy":" 24%",
"rating_overweight":" 41%",
"rating_hold":" 32%",
"rating_underweight":" 0%",
"rating_sell":" 3%",
"total_recs":34,
"rating_scale":" 2.18"
},
{
"symbol":"HSY",
"rating_buy":" 11%",
"rating_overweight":" 17%",
"rating_hold":" 72%",
"rating_underweight":" 0%",
"rating_sell":" 0%",
"total_recs":18,
"rating_scale":" 2.61"
},
{
"symbol":"K",
"rating_buy":" 15%",
"rating_overweight":" 20%",
"rating_hold":" 55%",
"rating_underweight":" 5%",
"rating_sell":" 5%",
"total_recs":20,
"rating_scale":" 2.65"
},
{
"symbol":"KHC",
"rating_buy":" 14%",
"rating_overweight":" 24%",
"rating_hold":" 52%",
"rating_underweight":" 10%",
"rating_sell":" 0%",
"total_recs":21,
"rating_scale":" 2.57"
},
{
"symbol":"MDLZ",
"rating_buy":" 25%",
"rating_overweight":" 63%",
"rating_hold":" 13%",
"rating_underweight":" 0%",
"rating_sell":" 0%",
"total_recs":24,
"rating_scale":" 1.88"
},
{
"symbol":"PEP",
"rating_buy":" 23%",
"rating_overweight":" 32%",
"rating_hold":" 41%",
"rating_underweight":" 0%",
"rating_sell":" 5%",
"total_recs":22,
"rating_scale":" 2.32"
},
{
"symbol":"PG",
"rating_buy":" 21%",
"rating_overweight":" 33%",
"rating_hold":" 42%",
"rating_underweight":" 0%",
"rating_sell":" 4%",
"total_recs":24,
"rating_scale":" 2.33"
}
],
[
{
"symbol":"CLX",
"ytd_changepercent":" -4.79%",
"day5_changepercent":" -8.69%",
"day30_changepercent":" -2.61%",
"month3_changepercent":" -9.73%",
"month6_changepercent":" -18.52%",
"year1_changepercent":" 18.10%",
"year2_changepercent":" 31.24%",
"year5_changepercent":" 73.24%",
"max_changepercent":" 328.77%"
},
{
"symbol":"COST",
"ytd_changepercent":" -5.55%",
"day5_changepercent":" .98%",
"day30_changepercent":" -3.82%",
"month3_changepercent":" -5.20%",
"month6_changepercent":" 7.63%",
"year1_changepercent":" 19.21%",
"year2_changepercent":" 75.75%",
"year5_changepercent":" 177.91%",
"max_changepercent":" 806.99%"
},
{
"symbol":"HSY",
"ytd_changepercent":" -3.76%",
"day5_changepercent":" .80%",
"day30_changepercent":" -3.08%",
"month3_changepercent":" 1.93%",
"month6_changepercent":" 4.16%",
"year1_changepercent":" -2.02%",
"year2_changepercent":" 44.34%",
"year5_changepercent":" 88.36%",
"max_changepercent":" 300.50%"
},
{
"symbol":"K",
"ytd_changepercent":" -6.75%",
"day5_changepercent":" -1.54%",
"day30_changepercent":" -5.37%",
"month3_changepercent":" -8.93%",
"month6_changepercent":" -14.77%",
"year1_changepercent":" -13.32%",
"year2_changepercent":" 5.65%",
"year5_changepercent":" -4.81%",
"max_changepercent":" 101.49%"
},
{
"symbol":"KHC",
"ytd_changepercent":" -2.48%",
"day5_changepercent":" .87%",
"day30_changepercent":" -.41%",
"month3_changepercent":" 7.90%",
"month6_changepercent":" -.53%",
"year1_changepercent":" 21.39%",
"year2_changepercent":" -21.83%",
"year5_changepercent":" -42.90%",
"max_changepercent":" -41.71%"
},
{
"symbol":"MDLZ",
"ytd_changepercent":" -3.87%",
"day5_changepercent":" 1.39%",
"day30_changepercent":" -2.87%",
"month3_changepercent":" 1.57%",
"month6_changepercent":" 3.04%",
"year1_changepercent":" -.73%",
"year2_changepercent":" 27.61%",
"year5_changepercent":" 65.20%",
"max_changepercent":" 86.23%"
},
{
"symbol":"PEP",
"ytd_changepercent":" -4.95%",
"day5_changepercent":" 3.21%",
"day30_changepercent":" -1.38%",
"month3_changepercent":" 2.83%",
"month6_changepercent":" 4.94%",
"year1_changepercent":" .53%",
"year2_changepercent":" 32.30%",
"year5_changepercent":" 66.48%",
"max_changepercent":" 219.64%"
},
{
"symbol":"PG",
"ytd_changepercent":" -6.32%",
"day5_changepercent":" 1.06%",
"day30_changepercent":" -7.00%",
"month3_changepercent":" -8.45%",
"month6_changepercent":" -1.77%",
"year1_changepercent":" 4.71%",
"year2_changepercent":" 39.83%",
"year5_changepercent":" 84.87%",
"max_changepercent":" 191.33%"
}
]
]
重申我最初的问题，我如何动态地为我的JSON对象中的每个数组映射一个表，同时记住在单个级别定制每个表的可能性?
至于严格模式警告:React不喜欢没有使用单个html元素包装的JSX。要使它高兴，只需将JSX封装在<React.Fragment>中。
编辑您可以轻松地修改从特定数组的索引映射的对象。在我的例子中，它是<Table>的className。
return (
<>
{data.map((table, index) => {
if (index !== 3) return (<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
{Object.keys(table[0]).map((ceil) => (
<TableCell align="right">{ceil}</TableCell>
))}
</TableHead>
<TableBody>
{table.map((row) => (
if<TableRow>
{Object.keys(row).map((ceil) => (
<TableCell align="right">{row[ceil]}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>);
}) else return (
<span>paste your modified table code here</span>
);
</>
);
现在，你说你不能自定义每个表是什么意思?你所说的"定制"是什么意思?