React 组件在来自 JSON 对象的选项卡中呈现动态内容
Posted
技术标签:
【中文标题】React 组件在来自 JSON 对象的选项卡中呈现动态内容【英文标题】:React component render dynamic content in tabs from a JSON object 【发布时间】:2020-05-06 07:59:37 【问题描述】:在我的 React 组件中,我无法从 JSON 对象呈现动态选项卡。 我能够检索 JSON 数据键和值数组,但无法在 UI 中呈现它。
我正在使用 PrimeReact UI 组件。 https://www.primefaces.org/primereact/#/tabview
组件
export default class Report extends Component
render()
const splitGroupedStartingMaterials = this.state
return (
<div>
<TabView>
Object.keys(splitGroupedStartingMaterials).forEach(k =>
console.log('k : ' + k, JSON.stringify(splitGroupedStartingMaterials[k]));
return (<TabPanel header='Family'>
simple content here for testing
</TabPanel>);
)
</TabView>
</div>);
JSON 数据:-
"splitGroupedStartingMaterials":
"1": [
"id": 45598,
"symbol": "Mn",
"description": "Mn(NO3)2 (fr mn flake)_[10377-66-9]",
"priority": 1,
"matrices": "HNO3",
"family": "F2.0",
"splitGroup": "1"
,
"id": 45636,
"symbol": "Ti",
"description": "(NH4)2TiF6 (as Ti)_[16962-40-6]",
"priority": 2,
"matrices": "F- : HNO3",
"family": "F1.1",
"splitGroup": "1"
],
"2": [
"id": 45572,
"symbol": "Cr",
"description": "CrCl3 (fr Cr shot)_[10025-73-7]",
"priority": 2,
"matrices": "HCl",
"family": "F3.1",
"splitGroup": "1_2"
]
更新:-
控制台日志:-
10:46:28.769 InOrganicCreateCustomQuote.jsx:704 k : 1 ["id":45621,"symbol":"Sc","description":"Sc2O3 (as Sc)_[256652-08-1]","priority":1,"matrices":"HNO3","family":"F2.0","splitGroup":"1","id":45636,"symbol":"Ti","description":"(NH4)2TiF6 (as Ti)_[16962-40-6]","priority":2,"matrices":"F- : HNO3","family":"F1.1","splitGroup":"1","id":45640,"symbol":"V","description":"V2O5 (as V)_[1314-62-1]","priority":1,"matrices":"HNO3","family":"F2.0","splitGroup":"1"]
10:46:28.770 InOrganicCreateCustomQuote.jsx:704 k : 2 ["id":45646,"symbol":"Zr","description":"ZrCl2O (as Zr)_[7699-43-6]","priority":1,"matrices":"HCl","family":"F3.1","splitGroup":"1_2"]
对于此代码,不会呈现任何选项卡
【问题讨论】:
您面临什么具体问题?就目前而言,您的代码循环通过splitGroupedStartingMaterials
对象的“1”和“2”键。你想渲染什么?出现了什么具体问题?
我认为你不能在 foreach 中返回。尝试改用地图。
@evolutionxbox console.log 行打印对象的键和值
尝试控制台记录Object.keys().forEach( ...
的返回它可能是未定义的。 forEach
has an undefined
return value
谢谢各位,React 似乎只是 map 而不是 forEach。现在它适用于地图。
【参考方案1】:
你可以试试:
export default class Report extends Component
render()
const splitGroupedStartingMaterials = this.state
return (
<div>
<TabView>
Object.keys(splitGroupedStartingMaterials).map(k => (
<TabPanel header='Family'>
simple content here for testing
</TabPanel>
))
</TabView>
</div>);
【讨论】:
谢谢,但这甚至不会编译并给出编译错误。无法编译 ./src/components/inorganic/custom-quote/InOrganicCreateCustomQuote.jsx 第 705 行:预期分配或函数调用,而是看到一个表达式 no-unused-expressions 请立即重试。我在地图内的箭头函数之后忘记了()。 Map 与 forEach 基本相同,只是可以返回数据。需要返回数据来组装以上是关于React 组件在来自 JSON 对象的选项卡中呈现动态内容的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 React Navigation 5.x 在不同的选项卡中重置堆栈
两个浏览器选项卡中的相同 Vue.js 组件使 <select> 镜像其选定值