我是新的React。所以原谅我这个愚蠢的问题。我想创建一个组织层次结构，如附件所示。x1c 0d1x
我正在从JSon文件中提取所有必要的信息。
我的jsx文件看起来像这样：
请帮我两个忙：
1.如何在json文件中给予图像地址。
1.我已经成功地创建了根/父卡（即chetan lal），我如何创建它的子元素？我尝试了以下代码，但无法创建子元素。
import React, { useState } from 'react';
import Records from '../OrgDetail.json';
export default function Chart() {
const center = {
top: '60px',
backgroundColor: 'rgb(246,246,246)',
fontSize: '12px',
width: "250px",
height: "85px",
border: "1px solid grey",
borderRadius: '25px',
margin: 'auto',
display: 'flex',
justifyContent: 'center',
position: 'relative'
}
const linkstyle = {
left: '220px',
position: 'absolute',
textDecoration: 'none',
color: 'darkgrey',
color: 'darkgrey'
}
const imagestyle = {
border: '2px solid grey',
borderRadius: '50%',
height: '80px',
width: '80px',
position: 'absolute',
top: '-50px',
}
const namestyle = {
position: 'absolute',
top: '30px'
}
const designstyle = {
position: 'absolute',
top: '45px'
}
const buttonstyle = {
position: 'absolute',
top: '70px',
borderColor: 'grey'
}
const myFunction = (y) => {
console.log(y);
var x = document.getElementById(y);
console.log(x);
if (x.style.display === "none") {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
return (
<>
{Records && Records.map(record => {
return (
<div key={record.key} className="container" style={center}>
<img src={record.image} style={imagestyle} alt={record.name} />
<a style={linkstyle} href="/" alt=""><b>...</b></a>
<span style={namestyle}><b>{record.name}</b></span><br></br>
<p style={designstyle}>{record.designation}</p>
<button style={buttonstyle} >{record.child.length} ↓</button>
</div>
)
})}
{Records.child && Records.child.map(record => {
return (
<div className="display:flex" key={record.child.key} style={center}>
<img src={record.child.image} style={imagestyle} alt={record.name} />
<a style={linkstyle} href="/" alt=""><b>...</b></a>
<span style={namestyle}><b>{record.child.name}</b></span><br></br>
<p style={designstyle}>{record.child.designation}</p>
<button style={buttonstyle} >{record.child.child.length} ↓</button>
)
</div>
)
})}
</>
)
}JSon文件：
[{
"key": "p1",
"name": "Chetan Lal",
"designation": "Managing Director",
"image": "D:/React/RL_org/my-app/src/Images/Chetan-Lal-edit.jpg",
"about": "This is just test",
"child": [
{
"key": "c1",
"name": "Shagufta Merchant",
"designation": "VP-Digital Operations & HR",
"image": "../Images/Shagufta-Merchant-edit - Copy.jpg",
"about": "This is just test2",
"child": [
{
"key": "gc1",
"name": "Manjiri Nadkarni",
"designation": "Manager - NA Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2",
"child": [
{
"key": "ggc1",
"name": "Anurag Bhagrav",
"designation": "Team Leader - Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "ggc2",
"name": "Janhavi Chaudhari",
"designation": "Team Leader - Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "ggc3",
"name": "Anurag Shetty",
"designation": "Team Leader - Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2"
}
]
},
{
"key": "gc2",
"name": "Shailendra More",
"designation": "Manager - NA Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2",
"child": [
{
"key": "ggc1",
"name": "AjayKumar Padhy",
"designation": "Team Leader - SEO & Auto",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "ggc2",
"name": "Jignesh Shah",
"designation": "Asist. Manager",
"image": "placeholder.jpg",
"about": "This is just test2"
}
]
},
{
"key": "gc3",
"name": "Vaishakhi Phadke",
"designation": "Asst. Manager - NA Media Ops",
"image": "placeholder.jpg",
"about": "This is just test2",
"child": [
{
"key": "ggc1",
"name": "Hassel Rathod",
"designation": "Team Manger - National",
"image": "placeholder.jpg",
"about": "This is just test2"
}
]
},
{
"key": "gc4",
"name": "Mitesh More",
"designation": "Training Team Manager",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "gc5",
"name": "Shrutika Jadhav",
"designation": "Manager - HR",
"image": "placeholder.jpg",
"about": "This is just test2"
},
{
"key": "gc6",
"name": "Tejinder Ossan",
"designation": "Manager - Facility",
"image": "placeholder.jpg",
"about": "This is just test2"
}
]
},
{
"key": "c2",
"name": "Bhavesh Chauhan",
"designation": "VP-Marketing Operations & IT",
"image": "../Images/Bhavesh-Chauhan-edit.jpg",
"about": "This is just test3"
},
{
"key": "c3",
"name": "Sanket Naik",
"designation": "VP-Marketing Operations & Graphics",
"image": "../Images/Sanket-Naik-edit.jpg",
"about": "This is just test4"
},
{
"key": "c4",
"name": "Ankanksha Narula",
"designation": "Sr. Manager - Finance",
"image": "../Images/Akansha-Narula-edit.jpg",
"about": "This is just test5"
},
{
"key": "c5",
"name": "Diju Kurup",
"designation": "Manager - Marketing Operations",
"image": "../Images/Diju-Kurup-edit.jpg",
"about": "This is just test6"
},
{
"key": "c6",
"name": "Arya Andrade",
"designation": "Manager - Facility",
"image": "../Images/Arya-Andrade-edit.jpg",
"about": "This is just test7"
}
]
}]
1条答案
按热度按时间8yoxcaq71#
1.将图像放在公共/静态目录中，并相应地设置数据中的路径：
1.若要从数据呈现层次结构，您可能需要使用递归组件，该组件呈现当前元素，然后为每个子元素呈现自身。这将生成递归结构，无论数据的深度如何。
可能看起来像这样：
下面是一个live demo implementation on codesandbox，它使用上面的组件处理您的数据，生成的结果如下面的屏幕截图所示。
(You当然可以将其修改为只显示当前选择或其他内容。这只是为了说明的目的而作为方法的示例。）