在React代码行中添加 ap 标签的位置

Question

我有两个组件，可以从数据JS文件中渲染图像和链接。我还想生成一个段落，但不确定可以在哪里调用段落标签以在我的projectlist.js和project.js组件上生成它。 我希望它在图像之下。

project.js

import "./project.css";

const Project = ({ img, link }) => {
  return (
    <div className="p">
      <div className="p-browser">
        <div className="p-circle">Tick</div>
        <div className="p-circle"></div>
        <div className="p-circle"></div>
      </div>
      <a href={link} target="_blank">
        <img src={img} alt="" className="p-img" />
        <p>kscjksnkdjs</p>
      </a>
      <div className="p-right">
        <div className="p-bg"></div>
      </div>
    </div>
  );
};

export default Project;

projectlist.js

import "./projectList.css";
import Project from "../project/Project";
import { projects } from "../../data";

const ProjectList = () => {
  //   console.log(projects);
  return (
    <div className="pl">
      <div className="pl-texts">
        <h1 className="pl-title">Projects</h1>
        <p className="pl-description">
          {/* Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum sunt ad
          vitae. Quo maxime quos odit? Fuga omnis suscipit numquam adipisci unde
          aliquid vel deleniti ex eos excepturi. Atque, nostrum. */}
        </p>
      </div>
      <div className="pl-list">
        {projects.map((project) => (
          <Project key={project.id} img={project.img} link={project.link} />
        ))}
      </div>
      <div className="text">thsisihsjihih</div>
      <div className="pl-right">
        <div className="pl-bg"></div>
      </div>
    </div>
  );
};

export default ProjectList;

Answer 1

按照您上面的评论。

在其他情况下，要在 p 标记中显示每个项目的文本

您应该：

1. 使 Project 组件接受另一个名为 text 类似于 img 和 link
2. 使用插值 ({}) 将其显示在 Project 中的 p 中 然后将每个项目
3. 的 text 传递到map 中的 Project 组件

查看下面的代码示例

// Project component
const Project = ({ img, link, text }) => {
  return (
    <div className="p">

      ...rest of the code block
    
      <a href={link} target="_blank">
        <img src={img} alt="" className="p-img" />
        <p>{text}</p>
      </a>

      ...rest of the code block

    </div>
  );
};

// ProjectList
...rest of the code block

{projects.map((project) => ( 
  <Project key={project.id} img={project.img} link={project.link} text={project.text}/>
))}

...rest of the code block

另外，如果您希望在 p 中显示项目的文本> 标记在您的 ProjectList 组件中，那么您必须从项目列表中选择一个项目。

您可以使用零索引选择并显示列表中的第一个项目，如下所示

// ProjectList
const ProjectList = () => {
  //   console.log(projects);
  return (
    <div className="pl">
      <div className="pl-texts">

       ...rest of the code block

        <p className="pl-description">
          {projects[0].text}
        </p>

       ...rest of the code block

      </div>
    </div>
  );
};