将我的 html 代码插入 App.js 时出现问题

Question

我为一个电子商务网站项目制作了前端，并希望将我制作的 html 代码插入到我的 React 项目中。将我的代码复制并粘贴到 App.js 中时，我遇到了多个问题和错误，这些问题和错误实际上是非常简单的问题，但正常的修复不会这样做。

我的

标签与我的结束 div 标签连接，因此我的打开 div 标签不再有结束标签。

我添加了一些带有错误的图片，以便于查看。

    function App() {
      return (
        <div className="header">
        <div className="container">
            <div className="navbar">
                <a href="index.html" class="logo">
                    <h1 style="font-size: 30px;">FLOWERPOWER!<br/>WWW.FLOWERPOWER.NL</h1>
                </a>
                <nav>
                    <ul id="MenuItems">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="products.html">Producten</a></li>
                        <li><a href="">Tips</a></li>
                        <li><a href="">Over ons</a></li>
                        <li><a href="">Contact</a></li>
                        <li><a href="">Account</a></li>
                    </ul>
                </nav>
                <img src="images/cart.png" width="30px" height="30px"/>
                <img src="images/menu.png" class="menu-icon" onclick="menutoggle()"/>
            </div>
            <div className="row">
                <div className="col-2">
                    <h1>Koop uw feestboeketten hier!</h1>
                    <p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br/>
                        Bezorging in heel Nederland<p/>
                    <a href="products.html" class="btn">Kies uit! &#8594;</a>
                </div>
                <div className="col-2">
                    <img src="images/banner.png"/>
                </div>
            </div>
        </div>
    </div>
<div className="categorieen">
    <div className="small-container">
        <h2 className="title" style="font-size: 50px"> Boeket van de maand</h2>
        <div className="row">
            <div className="col-3">
                <img src="images/featuredbloem.jpg"/>
            </div>
        </div>
    </div>
</div>

<div className="small-container">
    <h2 className="title" style="font-size: 50px">Featured product</h2>
    <div className="row">
        <div className="col-4">
        <a href="producten/passievol-details.html">
            <img src="images/bloem1.png"/></a>
        <h4>Passievol</h4>
            <div className="rating">
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="far fa-star"></i>
            </div>
        <p>vanaf $ 79,95</p>
        </div>
        <div className="col-4">
            <a href="producten/welkompasen-details.html">
                <img src="images/bloem2.png"/></a>
            <h4>Welkom Pasen</h4>
            <div className="rating">
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="far fa-star"></i>
            </div>
            <p>vanaf $ 19,95</p>
        </div>
        <div className="col-4">
            <a href="producten/vrolijkpasen-details.html">
                <img src="images/bloem3.png"/></a>
            <h4>Vrolijk Pasen</h4>
            <div className="rating">
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="far fa-star"></i>
            </div>
            <p>vanaf $ 29,95</p>
        </div>
        <div className="col-4">
            <a href="producten/eindelijkvoorjaar-details.html">
                <img src="images/bloem4.jpg"/></a>
            <h4>Eindelijk voorjaar</h4>
            <div class="rating">
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="fas fa-star"></i>
                <i className="far fa-star"></i>
            </div>
            <p>vanaf $ 24,95</p>
        </div>
    </div>
</div>

<div className="footer">
    <div className="container">
        <div className="row">
            <div className="footer-col-1">
                <h3>FLOWERPOWER</h3>
                <ul>
                    <li>Over Ons</li>
                    <li>Contact</li>
                    <li>Tips</li>
                    <li>Lorum</li>
                    <li>Lorum</li>
                    <li>Lorum</li>
                </ul>
            </div>
            <div className="footer-col-2">
                <h3>Zakelijk</h3>
                <ul>
                    <li>Lorum</li>
                    <li>Lorum</li>
                    <li>Lorum</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div className="brands">
    <div className="small-container">
        <div className="row">
            <div className="col-5">
                <img src="images/logo-ideal.png"/>
            </div>
            <div className="col-5">
                <img src="images/logo-paypal.png"/>
            </div>
            <div className="col-5">
                <img src="images/logo-americanexpress.png"/>
            </div>
            <div className="col-5">
                <img src="images/logo-visa.png"/>
            </div>
        </div>
        <p className="copyright">Copyright © 2021 FLOWERPOWER! - flowerpower.nl Alle rechten voorbehouden.</p>
    </div>
</div>
</div>
  );
  }

export default App;

Answer 1

您的屏幕截图显示 1 个潜在错误。 您在第 28 行屏幕截图 1

上放错了 p 元素的结束标记

<p> .... <p/>

它应该是

<p> .... </p>

编辑：

您的代码有 2 个问题，

1. 不平衡的 div 标签，
2. 风格道具

第 1 期:: 替换这段代码

                    <div className="col-2">
                        <h1>Koop uw feestboeketten hier!</h1>
                        <p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br />
                      Bezorging in heel Nederland<p />
                            <a href="products.html" class="btn">Kies uit! &#8594;</a>
              </div>
                        <div className="col-2">
                            <img src="images/banner.png" />
                        </div>
                    </div>
                </div> 

有了这个

                    <div className="col-2">
                        <h1>Koop uw feestboeketten hier!</h1>
                        <p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br />
                           Bezorging in heel Nederland</p>
                        <a href="products.html" class="btn">Kies uit! &#8594;</a>
                        <div className="col-2">
                            <img src="images/banner.png" />
                        </div>
                    </div>
                </div>

第二期:: React 样式标签接受一个对象，而不是字符串

<div style={{fontSize:'20px}}></div>

Answer 2

我认为问题在于<div className="header"> ... </div> 和<div className="brands"> ... </div> 并非都包含在返回函数的单个片段中。如果您将代码更正为：

... 

function App() {
  return(
    <>
      <div className="header"> ... </div>
      <div className="brands"> ... </div>
    </>
  );
}

export default App;

错误将消失。另请注意，我已将class="" 属性替换为className=""。

希望答案有帮助。

Answer 3

React intellisense 因为你有“类”而变得疯狂。您需要将其重命名为 className。 （对于所有 JSX 元素都是如此，例如 div、a、p 等...）