React新手疑问：将<card>改为<Card>后应用崩溃的原因

问题原因 #

你把<card>改成<Card>后，在Card组件内部直接渲染了自身，这会触发无限递归：React会不断创建Card组件的实例，直到调用栈超出限制，最终导致应用崩溃。

React的规则是：首字母大写的标签会被识别为自定义组件，当你在Card组件的return里写<Card>，就相当于递归调用这个组件本身，没有终止条件，自然会崩。

解决办法 #

根据你的需求，有两种常见处理方式：

方式1：使用原生HTML标签加类名 #

如果你只是需要一个容器来包裹内容，直接用<div>、<section>这类原生HTML标签，配合className做样式即可，这是最直接的方案：

function Card() {
  return (
  <div className="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>
  </div>
  );
}

方式2：定义独立的容器组件 #

如果确实需要自定义组件作为容器，要给它起一个和当前Card不同的名字，避免递归：

// 先定义容器组件
function CardWrapper() {
  return <div className="card-wrapper">{props.children}</div>;
}

// 再编写Card组件
function Card() {
  return (
  <CardWrapper>
    <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>
  </CardWrapper>
  );
}

内容的提问来源于stack exchange，提问作者unnkm