在导入的 React 组件中插入图像已解决！

如何解决在导入的 React 组件中插入图像已解决！

（已解决，请参阅下面的答案）

我想在每个手风琴部分中添加一个图像，并且我尝试使用 <img src={Image}/>。如果那段代码像屏幕截图那样放置它可以工作，但它位于之外。

如果我将代码移到中，它就会停止工作，我无法确切地弄清楚如何解决这个问题。一个想法是以某种方式使用 {props.title} 和 {props.content} 之类的图像，但无法使其工作。

有什么建议吗？

Accordion.js // 带有手风琴逻辑的组件

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 // 我在其中导入手风琴逻辑的组件

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."/>

解决方法

改变这个：

<div
  className="accordion-text"
  dangerouslySetInnerHTML={{ __html: props.content }}
/>

也是：

<div className="accordion-text">{props.children}</div>

然后您应该可以像这样使用手风琴：

<Accordion title="Week 1">
  <p>Hello World</p>
  <img src={...} />
</Accordion>

您可能需要根据自己的需要进行调整。