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

Question

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

到目前为止我已经尝试过：

 function Card(props) { const classes = 'card' + props.className; return ( <div className={classes}> {props.children} </div> ) } export default Card

我在 CSS 文件中的“卡片”类上应用了样式。

父组件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 。