Question

我正在用React创建一个网站，该网站有一个简单的搜索引擎，可以搜索某些带有信息的卡片。在Card.js文件中，我在名称中包含一个h2标签，在电子邮件中包含一个p2标签。编译网站后，会出现以下错误消息：

index.js:1375 Warning: The tag <p2> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
    in p2 (at Card.js:9)
    in div (at Card.js:7)
    in div (at Card.js:5)
    in Card (at CardList.js:10)
    in div (at CardList.js:6)
    in CardList (at App.js:28)
    in div (at App.js:25)
    in App (at src/index.js:9)

Tried changing the p2 tag to "P2" but it does not compile.

Card.js file:

import React from 'react';

const Card = ({name, email, id}) => {
    return (
        <div className='tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
            <img alt='photos' src={`https://robohash.org/${id}?200x200`} />
            <div>
                <h2>{ name }</h2>
                <p2>{ email }</p2>
            </div>
        </div>
    );
}

export default Card;

Answer 1

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML元素p2不存在。尝试仅使用p。

添加：它可能与纯粹由html和css构建的静态内容一起使用，但是不建议这样做。

检查： Why does CSS work with fake elements?

Answer 2

有关此主题的更多信息：

通过添加不合格的元素以临时方式扩展 HTML 或任何标记语言是一种不好的做法。将来，W3C 可能会扩展到包括 P2 等元素。更好的做法是使用 CSS 类来导出相同的结果：

<p>Normal content</p>
<p class="my-p2">P2 content</p>

我为 W3c 做出了贡献，我们强烈反对人们以特别的方式扩展建议（W3C“标准”的官方术语）。如果您必须扩展它，请使用命名空间以避免将来发生这样的冲突：

<my-namespace:p2>my P2 content</my-namespace:p2>

警告：此浏览器无法识别标签<p2>

2 个答案: