javascript - 如何使用 ReactJS 动态呈现 html 块？
问题描述
我正在努力在我的侧边栏中动态呈现 html 元素。目前，这仅设置为接收至少 1 个但最多 5 个的项目列表，以及 1-5 个子项目。HTML 是硬编码的，我想知道是否有一种方法可以为项目列表中的每个项目重用相同的 HTML 块。
import React, { useContext, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { DashboardContext } from '../dashboardContext/DashboardContext'
import './sidebar.css'
import Accordion from 'react-bootstrap/Accordion'
import Card from 'react-bootstrap/Card'
import './homeicon.png'
function Sidebar() {
const [view, setView] = useContext(DashboardContext)
var host = "http://localhost:3000/"
var config = view.configFile
var itemToFetch = host + config
const data = view.configInput
useEffect(() => {
async function fetchData() {
const res = await fetch(itemToFetch);
res
.json()
.then(res => setConfigData(res));
}
fetchData();
// eslint-disable-next-line react-hooks/exhaustive-deps,
}, [view.configFile]); //fetchData when view.configFile changes
//have to make separate setter functions because otherwise the whole view gets overwritten (i.e., with "undefined")
const setProject = (name) => {
setView({ ...view, name: name });
}
const setConfigData = (data) => {
setView({ ...view, configInput: data })
}
if (data == null) {
return (null)
}
// NEEDS HELP
//currently this is only set up to receive project lists of at least 1 but up to 5
//the number of subprojects can be up to 6 (the compiler doesn't complain about having the expected number of subprojects if it's below that)
else if (data != null) {
return (
<div className="sidebar">
<Accordion>
<Link to='/dashboard'>
<img className="home-img" alt="a house" src={require('./homeicon.png')} />
<p className="homeTitle" onClick={() => setProject(view.configFile)}>Home</p>
</Link>
{/* Group 1 */}
<Card>
<Accordion.Toggle as={Card.Header} eventKey="0">
<p>{data[0].projectName}</p>
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Link to='/dashboard'>
<p onClick={() => setProject(data[0].nickname)}>{data[0].projectName} Overall</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[0].subprojectNicknames[0])}>{data[0].subprojects[0]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[0].subprojectNicknames[1])}>{data[0].subprojects[1]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[0].subprojectNicknames[2])}>{data[0].subprojects[2]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[0].subprojectNicknames[3])}>{data[0].subprojects[3]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[0].subprojectNicknames[4])}>{data[0].subprojects[4]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[0].subprojectNicknames[5])}>{data[0].subprojects[5]}</p>
</Link>
</Card.Body>
</Accordion.Collapse>
</Card>
{/* Group 2 */}
{(data.length >= 2) ? <div>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="1">
<p>{data[1].projectName}</p>
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>
<Link to='/dashboard'>
<p onClick={() => setProject(data[1].nickname)}>{data[1].projectName} Overall</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[1].subprojectNicknames[0])}>{data[1].subprojects[0]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[1].subprojectNicknames[1])}>{data[1].subprojects[1]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[1].subprojectNicknames[2])}>{data[1].subprojects[2]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[1].subprojectNicknames[3])}>{data[1].subprojects[3]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[1].subprojectNicknames[4])}>{data[1].subprojects[4]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[1].subprojectNicknames[5])}>{data[1].subprojects[5]}</p>
</Link>
</Card.Body>
</Accordion.Collapse>
</Card>
</div>
: ''}
{/* Group 3 */}
{(data.length >= 3) ? <div>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="2">
<p>{data[2].projectName}</p>
</Accordion.Toggle>
<Accordion.Collapse eventKey="2">
<Card.Body>
<Link to='/dashboard'>
<p onClick={() => setProject(data[2].nickname)}>{data[2].projectName} Overall</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[2].subprojectNicknames[0])}>{data[2].subprojects[0]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[2].subprojectNicknames[1])}>{data[2].subprojects[1]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[2].subprojectNicknames[2])}>{data[2].subprojects[2]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[2].subprojectNicknames[3])}>{data[2].subprojects[3]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[2].subprojectNicknames[4])}>{data[2].subprojects[4]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[2].subprojectNicknames[5])}>{data[2].subprojects[5]}</p>
</Link>
</Card.Body>
</Accordion.Collapse>
</Card>
</div>
: ''}
{/* Group 4 */}
{(data.length >= 4) ? <div>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="3">
<p>{data[3].projectName}</p>
</Accordion.Toggle>
<Accordion.Collapse eventKey="3">
<Card.Body>
<Link to='/dashboard'>
<p onClick={() => setProject(data[3].nickname)}>{data[3].projectName} Overall</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[3].subprojectNicknames[0])}>{data[3].subprojects[0]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[3].subprojectNicknames[1])}>{data[3].subprojects[1]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[3].subprojectNicknames[2])}>{data[3].subprojects[2]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[3].subprojectNicknames[3])}>{data[3].subprojects[3]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[3].subprojectNicknames[4])}>{data[3].subprojects[4]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[3].subprojectNicknames[5])}>{data[3].subprojects[5]}</p>
</Link>
</Card.Body>
</Accordion.Collapse>
</Card>
</div>
: ''}
{/* Group 5 */}
{(data.length >= 5) ? <div>
<Card>
<Accordion.Toggle as={Card.Header} eventKey="4">
<p>{data[4].projectName}</p>
</Accordion.Toggle>
<Accordion.Collapse eventKey="4">
<Card.Body>
<Link to='/dashboard'>
<p onClick={() => setProject(data[4].nickname)}>{data[4].projectName} Overall</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[4].subprojectNicknames[0])}>{data[4].subprojects[0]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[4].subprojectNicknames[1])}>{data[4].subprojects[1]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[4].subprojectNicknames[2])}>{data[4].subprojects[2]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[4].subprojectNicknames[3])}>{data[4].subprojects[3]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[4].subprojectNicknames[4])}>{data[4].subprojects[4]}</p>
</Link>
<Link to='/dashboard'>
<p onClick={() => setProject(data[4].subprojectNicknames[5])}>{data[4].subprojects[5]}</p>
</Link>
</Card.Body>
</Accordion.Collapse>
</Card>
</div>
: ''}
</Accordion>
</div>
)
}
}
export default Sidebar
任何帮助表示赞赏！
解决方案
推荐阅读
- r - 汇总 dplyr 中每组的所有其他值
- python - 用分号将 CSV 拆分为单独的列
- matlab - 在 Matlab Coder 中使用相对路径
- laravel - 组的路由名称不适用
- javascript - Nestjs：即使正文验证失败也上传图片
- schema.org - 谷歌结构化数据价格未显示在谷歌中
- r - 如何将单个字符串（单词以逗号分隔）转换为多个字符串？
- java - 如何在 android 上使用 AccessibilityService 获取屏幕上的 View 对象？
- r - ggplot2 将百分比添加到按 x 轴分组的条形/删除仍添加的缺失数据
- ios - React Native 0.61：使用自动链接，你还需要在 Podfile 中添加行吗？