reactjs - Insert image within imported React component (SOLVED!)
问题描述
(SOLVED, see answer below)
I want to add an image inside each accordion section and I've tried to use <img src={Image}/>
. If that piece of code is placed as in the screenshot it works, but it's located outside of the < Accordion >.
If I move the code inside < Accordion > it stops working and I can't figure out exactly how to fix this. A thought was to somehow use image like {props.title}
and {props.content}
but could not get it to work.
Any suggestions?
code in component FirstAccordion.js
Accordion.js // component with the accordion logic
return (
<div className="accordion-section">
<button className={`accordion-button ${setActive}`} onClick={toggleAccordion}>
<p className="accordion-title">{props.title}</p>
<Chevron
className={`${setRotate}`}
width={10}
fill={"#777"}
/>
</button>
<div
ref={content}
className="accordion-content"
style={{ maxHeight: `${setHeight}` }}>
<div
className="accordion-text"
// the prop dangerouslySetInnerHTML makes it possible to use HTML within a string
dangerouslySetInnerHTML={{ __html: props.content }}
/>
</div>
</div>
FirstAccordion.js // component in which I import accordion logic
export function FirstAccordion() {
return (
<>
<Sidebar />
<Navbar />
<h1 className="h1-accordion">Pregnancy Week By Week</h1>
<section className="accordion-background">
<div className="accordion-wrapper">
<div className="accordion-container-cne">
<Accordion
title="Week 1"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
解决方案
Change this:
<div
className="accordion-text"
dangerouslySetInnerHTML={{ __html: props.content }}
/>
Too:
<div className="accordion-text">{props.children}</div>
You should then be able to use the accordion like this:
<Accordion title="Week 1">
<p>Hello World</p>
<img src={...} />
</Accordion>
You probably have to adjust to your needs.
推荐阅读
- javascript - app.use(express.static(path.join(__dirname))) 显然在我的快递服务器上不起作用
- angularjs - 在 ng-admin 创建视图的顶部添加一个链接?
- javascript - 动态 HTML 复选框上的“全选”复选框
- robotics - 在 Pepper 中,如何备份并擦除现有包?
- python - 从特殊字符列表中提取整数
- sql - 在 Oracle SQL 中搜索多个字符串
- vba - 如何在vba中定义公式?
- netsuite - 无法在套件脚本 2.0 中从客户端向套件发布数据
- vba - 将变量从 vba 传递到 .bat 文件
- python - Python。Tor 浏览器。虚拟专用网。代理人