React函数组件开发时detailPrice标签报需自闭合错误如何解决

错误原因 #

1. 标签闭合规则混用
   你在使用detailPrice标签时，已经写了完整的开标签<detailPrice >，且标签内部包含了title、priceInfo等子元素，此时应该使用普通闭合标签</detailPrice>，但你写的是自闭合格式</detailPrice />，两种写法冲突触发了报错。
2. 自定义组件命名不规范
   React规定所有自定义组件必须以大写字母开头，你当前代码里的detailPrice、columnTop、titleBox等自定义组件全是小写开头，React会将其识别为原生HTML标签，而原生HTML不存在这类标签，后续即便修正闭合问题也会出现其他异常。

修正方案 #

1. 把</detailPrice />改成</detailPrice>，检查所有有子内容的标签，都不要在结束标签里加额外的斜杠，仅无任何子内容的组件可以使用<Component />自闭合写法。
2. 所有自定义组件首字母大写，比如detailPrice改成DetailPrice、columnTop改成ColumnTop，所有用到该组件的地方同步修改命名即可。

修正后的核心代码示例 #

<FigureWrap>
  <DetailSize>
    <title>사이즈</title>
    <ShowAllSizes>
      <a>모든 사이즈</a>
    </ShowAllSizes>
  </DetailSize>
  <DetailPrice>
    <title>최근 거래가</title>
    <PriceInfo>
      <amount>248,000</amount>
      <fluctuation>6000원(-2.4%)</fluctuation>
    </PriceInfo>
  </DetailPrice>
</FigureWrap>

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