简单的 HTML CSS 代码到 ReactJS 的转换

Question

我是 ReactJS 的新手。我需要帮助将以下简单的 HTML/CSS 代码转换为 ReactJS。 我想在我的网站上有 3 个 CSS 卡，顶行 2 个位置，中间 1 个位置。请帮忙。

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width:40%;
  height: 30%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}

<h2>Card</h2>

<div style="display: flex; justify-content: space-between; margin-top:100px; margin-right:150px; margin-left: 150px">
  <div class="card">
    <a href="https://www.google.com"><img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar"
        style="width:100%"></a>
  </div>

  <div class="card">
    <img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar" style="width:100%">
  </div>

</div>

<div style="display: flex; justify-content: center; margin-top:100px; margin-right:150px; margin-left: 150px">
  <div class="card">
    <a href="https://www.google.com"><img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar"
        style="width:100%"></a>
  </div>
</div>

Answer 1

从技术上讲，您可以制作一个看起来像您想要的那样的 React 网站。为此，您必须在 ReactJs 中创建一个卡片组件，您可以为上述 HTML 编写 jsx，css 将是相同的。只需将其导入您的组件中。您的卡片组件将如下所示：

import React from 'react';
import './styles.css';

function card() {
  return (
    <div>
      <h2>Card</h2>

      <div style={{display: flex; justifyContent: spaceBetween; marginTop:100px; marginRight:150px; marginLeft: 150px}}>
        <div className="card">
          <a href="https://www.google.com"><img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar"
              style="width:100%"/></a>
        </div>

        <div className="card">
          <img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar" style="width:100%"/>
        </div>

      </div>

      <div style={{display: flex; justifyContent: center; marginTop:100px; marginRight:150px; marginLeft: 150px}}>
        <div className="card">
          <a href="https://www.google.com"><img src="https://wallpaperaccess.com/full/3856041.jpg" alt="Avatar"
              style={{width:100%}}/></a>
        </div>
      </div>
    </div>
  )
}

export default card;

将你的 CSS 保存在同一个文件夹中。