reactjs - 即使在传递属性后,RenderLeader 组件也不会呈现
问题描述
我正在学习关于 Reactjs 的教程。该页面工作正常,但所需的 RenderLeader 组件未显示在页面上。(鉴于已将所有必需的组件导入到文件中)...在企业领导下,我的网页上呈现了一个空白区域。
function RenderLeader({ leader }) {
return (
<Media list>
<Link to={`/aboutus/${leader.id}`}>
{" "}
{/* Back Quotes not normal one `` */}
<Media tag="li">
<Media left top href="#">
<Media object src={leader.image} alt={leader.name} />
</Media>
<Media body>
<Media heading>{leader.name}</Media>
<Media tag>{leader.designation}</Media>
{leader.description}
</Media>
</Media>
</Link>
</Media>
);
}
function About(props) {
const leaders =
props.leaders &&
props.leaders.map((leader) => {
return (
<div key={leader.id} className="col-12 col-md-5 m-1">
<p>Leader {leader.name}</p>
<RenderLeader leader={leader} />
</div>
);
});
return (
<div className="container">
<div className="row">
<Breadcrumb>
<BreadcrumbItem>
<Link to="/home">Home</Link>
</BreadcrumbItem>
<BreadcrumbItem active>About Us</BreadcrumbItem>
</Breadcrumb>
<div className="col-12">
<h3>About Us</h3>
<hr />
</div>
</div>
<div className="row row-content">
<div className="col-12 col-md-6">
........
</div>
<div className="col-12">
.....
</div>
</div>
<div className="row row-content">
<div className="col-12">
<h2>Corporate Leadership</h2>
</div>
<div className="col-12">{leaders}</div>
</div>
</div>
);
}
export default About;
解决方案
推荐阅读
- php - 如何使用角度和 PHP 将非常长的文本保存到数据库中
- windows - 带有两个命令的 Windows 批处理 FOR 循环以创建文本文件
- python - 需要帮助编写一个 Python 程序,该程序将读取此输入文件并显示以下信息:输入文件的总和、平均值、最小值和最大值
- join - 加入后的规范无法找到具有给定名称的属性
- php - PHPOffice 库和颜色
- apache-spark - Apache Spark:是否可以在 spark 作业中获取数据集计数?
- import - 如何将导入驾驶舱作业迁移到后台导入/导出
- model-view-controller - MVC 设计模式的用例图
- java - 如何在 recyclerView 中创建具有固定高度和宽度的响应式列表项
- python - 如何在 Python 中使用 lambda 进行排序。当我尝试使用 lambda 对 str 列表进行排序时,我无法得到我想要的结果