主页 / coding / 问题 / 77889334
Accepted
XM01 - stands with Palestine
Asked: 2024-01-27 06:40:28 +0800 CST

在React组件中显示与箭头对应的标题和内容

  • 772

我目前正在开发一个名为 PolitiqueContent 的 React 组件，我在其中显示带有指向不同部分的箭头的信息。每个箭头都与标题和内容相关联，我在实现所需的显示方面面临困难。

这是我当前的代码：

import React from "react";

const PolitiqueConeten = () => {
  return (
    <div className="flex justify-center">
      {/* First Arrows  */}
      {/* Title */}
      <h2>Title 1</h2>
      <br />
      {/* Content */}
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
        quibusdam?
      </p>
      {/* Third Arrows  */}
      <h2>Title 3</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga,
        laboriosam.
      </p>
      <img
        className="w-5/6"
        src="img/backgrounddPool.png"
        alt="backroundPool"
      />
      {/* Second Arrows  */}
      <h2>Title 2</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo,
        accusamus?
      </p>
      {/* Forth Arrows  */}
      <h2>Title 4</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas,
        perspiciatis!
      </p>
    </div>
  );
};

export default PolitiqueConeten;

我的代码的输出：

在此输入图像描述

我想要这样的：

在此输入图像描述

我感谢任何有关如何构建 JSX 或修改我的代码以实现预期布局的指导或建议。预先感谢您的帮助

reactjs

1 个回答

  1. Best Answer

    您可以考虑使用 CSS 网格系统，以图像作为背景。定义行和列后，您也可以使 DOM 顺序与编号隐含的顺序相同。

    const PolitiqueConeten = () => {
  return (
    <div className="grid grid-cols-2 grid-rows-2 gap-x-96 gap-y-40 grid-flow-col bg-[url(https://i.imgur.com/BK7sWVj.png)] bg-contain bg-center bg-no-repeat w-[1077px] h-[546px] py-10">
      <div>
        <h2>Title 1</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
          quibusdam?
        </p>
      </div>
      <div>
        <h2>Title 2</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
          quibusdam?
        </p>
      </div>
      <div>
        <h2>Title 3</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
          quibusdam?
        </p>
      </div>
      <div>
        <h2>Title 4</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit,
          quibusdam?
        </p>
      </div>
    </div>
  );
};


ReactDOM.createRoot(document.getElementById('app')).render(<PolitiqueConeten/>);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div id="app"></div>

    • 1

相关问题