警告:DOM属性"class"无效.你是说"className"吗

Question

当我加载包含几个部分的主页时，我遇到了这个问题。这些部分从上到下依次为导航栏、主部分、卡片部分和页脚部分。我在主部分使用了两个按钮，点击后效果良好，但卡片上的按钮不起作用。我的页脚部分按钮工作正常。当我查看chrome-dev工具时，我看到了关于该类的警告消息，但我查看了所有组件的整个代码，我没有在任何地方使用该类。这是我主页的代码。

import React from 'react';
import { Card, CardTitle, CardImg, CardImgOverlay, CardText, Button } from 'reactstrap';
import '../../App.css';
import HeroSection from '../HeroSection';
import { Link } from "react-router-dom";
function Home(props) {

const directory = props.services.map(service => {
return (
<div key={service.id} className="col-md-5 mx-auto d-block">
<Card>
<CardImg top width="100%" src={service.image} alt={service.name} />
<CardImgOverlay>
<CardTitle>{service.name}</CardTitle>
</CardImgOverlay>
<CardText>{service.description}</CardText>
<Link to={service.path}>
<Button 
color="primary">Find Nearby
</Button>{' '}
</Link>
</Card>
</div>
);
});
return (
<>
<div className="container">
<div className="row">
<HeroSection />
</div>
<div className="row">
{directory}
</div>
</div>
</>
);
}
export default Home;

Answer 1

如果您使用svg标记，您应该查看其中的属性。属性名称也必须是camelCase。

不正确：

<路径填充规则="；偶数"；d="；M0 2.5A.5.5 0 0 1.5 2H2a.5.5 0 0 1.485.379L2.89"/>

更正使用js:fillRule