如何在子组件中嵌套父组件的类?

Question

我正处于react的学习阶段，我一直在尝试通过react.js中的类在子组件中嵌套父组件的样式。怎么做呢?

我已经尝试过了:

function Card(props) {
const classes = 'card' + props.className;

return (
<div className={classes}>
{props.children}
</div>
)
}
export default Card

我在一个CSS文件中给class 'card'添加了样式

父组件JS代码:

import Card from './UI/Card';
function ExpenseItem(props){
return (
<Card className="expense-item">
<ExpenseDate date={props.date} />
<div className="expense-item__description">
<h2>{props.title}</h2>
<div className="expense-item__price">{`₹ ${props.amount}`}</div>
</div>
</Card>
)
}

现在，父组件中的各种类都有相应的样式。我想把这些类嵌套在子组件中，以使这些样式能够工作。

您可以在代码中看到我尝试嵌套类的方式，但它不起作用。

const classes = 'card' + props.className;

我做错了什么?我该如何改正呢?

Answer 1

您错过了card类名称后的空格，否则我看不到您的代码中的任何其他问题。尝试下面，希望它的工作const classes = 'card ' + props.className;

Answer 2

只需注意一点，这将使您的组件相互依赖。React最棒的一点就是它允许你分离关注点。因此，Card组件做Card组件工作，显示一些信息，不需要依赖于父组件，在这种情况下是ExpenseItem。

一种方法是使用styled-components。