React 新手（初学者）答案

【问题标题】：New to React (Beginner)React 新手（初学者）
【发布时间】：2023-01-18 23:26:25
【问题描述】：

我用 React 写了一段代码

function Card() {
  return (
  <card>
    <div>
      <h2 className={ "dad"}>Nitin Muley</h2>
      <img src={ "https://freeimage.host/i/HaMOhCu"} />
      <p>+91 123 456 7890</p>
      <p>xyz@gmail.com</p>
    </div>
  </card>
  );
}

当我在返回函数中将 <card><card> 更改为 <Card></Card> 时，我的反应应用程序崩溃了。

我不明白为什么会这样。

我尝试更改代码，因为我的控制台发出警告：标签 <card> 在此浏览器中无法识别。如果你打算渲染一个 React 组件，那么它的名字以大写字母开头。

当我将 <card> 更改为 <Card> 时，应用程序会立即启动。

【问题讨论】：

您似乎在 Card 组件的定义中使用了 <Card/>？
如果将 <card> 更改为 <Card> 则递归地包含组件本身
如果呈现 <Card> 涉及呈现 <Card> 那么你所拥有的是无限递归。你为什么要那个？你想达到什么目的？
由于您当前的组件名为Card，如果您在其中使用它，它将创建一个无限循环。
我是编码世界的新手，所以我犯了错误。我仍在学习。谢谢你帮助先生。

标签： reactjs

【解决方案1】：

你混淆了一些东西

<Card> 正在调用函数 Card() 并且该函数未导入且无效等。

它是如何工作的：

您创建函数 Card()
您导入了另一个代码或要在其中使用函数 Card() 的代码的另一部分

您通过键入<Cart></Cart> 或<Cart/> 来调用函数 Card()

现在在您的代码中有以下错误：

function Card() {
  return (
  <card> //you do not need this 
    <div>
      <h2 className={ "dad"}>Nitin Muley</h2> //you don't need the {} for just a string
      <img src={ "https://freeimage.host/i/HaMOhCu"} /> //you can not do this for the src, you need to use require or import the file
      <p>+91 123 456 7890</p>
      <p>xyz@gmail.com</p>
    </div>
  </card> // you do not need this 
  );
}

正确的代码是：

function Card() {
  return (   
    <div>
      <h2 className="dad">Nitin Muley</h2>
      <img src={require("https://freeimage.host/i/HaMOhCu")} alt="image"/> 
      <p>+91 123 456 7890</p>
      <p>xyz@gmail.com</p>
    </div>  
  );
}

现在您可以在另一个代码或部分代码中多次使用此函数。

【讨论】：