如何将组件导入另一个组件中，其中包括反应 js 中的图像

Question

我正在处理 reactjs 的一些任务。 包括许多组件。 我想将一个组件导入另一个包含不同图像的组件。 我该怎么做。 这是导出和包含图像源 PortItems.js 的 (portfolio items) 组件

 import React from "react"; const PortItems = () => { return( <div> {/* Portfolio Item 1*/} <div className="col-md-6 col-lg-4 mb-5"> <div className="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1"> <div className="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100"> <div className="portfolio-item-caption-content text-center text-white"><i className="fas fa-plus fa-3x"></i> </div> </div> <img className="img-fluid" src="" alt="this is cabin image" /> </div> </div> </div> ) } export default PortItems;

这是导入 PortItems 的主要组件的代码

 import React,{Component} from "react"; import "../App.css"; import PortItems from "./PortItems"; import Cabin from "./images/cabin.png"; import Cake from "./images/cake.png"; import Circus from "./images/circus.png"; import Game from "./images/game.png"; import Safe from "./images/safe.png"; import Submarine from "./images/submarine.png"; const Portfollio = () =>{ return( <div> {/* Portfolio Section*/} <section className="page-section portfolio" id="portfolio"> <div className="container"> {/* Portfolio Section Heading*/} <h2 className="page-section-heading text-center text-uppercase text-secondary mb-0">Portfolio</h2> {/* Icon Divider*/} <div className="divider-custom"> <div className="divider-custom-line"></div> <div className="divider-custom-icon"><i className="fas fa-star"></i></div> <div className="divider-custom-line"></div> </div> {/* Portfolio Grid Items*/} <div className="row"> * <PortItems src={Cabin} /> *

Answer 1

尝试将道具添加到PortItem组件并在其<img />标记中使用它：

const PortItems = (props) => {
    return(
        <div>
            {/* Portfolio Item 1*/}
            <div className="col-md-6 col-lg-4 mb-5">
                <div className="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
                  <div className="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
                      <div className="portfolio-item-caption-content text-center text-white"><i className="fas fa-plus fa-3x"></i>
                      </div>
                  </div>
                  <img className="img-fluid" src={ props.src } alt="this is cabin image" />
              </div>
            </div>
        </div>
    )
}