reactjs - 自定义组件中的动态类名和固定类名

Question

我正在创建一个自定义组件，我希望能够使其足够灵活以便以其他方式重用它。在它的自然形式中，它包含一个 box 类，这为它提供了一些原生样式。但是，如果我想重用这个组件并改变样式，我想将另一个类与它已经包含的框类级联。通过简单地声明 className="custom-class" 它会呈现为:

期望的结果

  <div class="box custom-class">
      Something
  </div>

现在我有这样的东西:

import React from 'react';
import { Row, Col } from 'react-flexbox-grid';

const Box = (props) => (
    <div className='box {props.className}'>
        {props.showTitle &&
            <Row between="xs" className="box-top">
                <span className="box-title">{props.title}</span>
            </Row>
        }
        <Col xs={12} className="box-info">
            {props.content}
        </Col>
        {props.showBottom &&
            <Col xs={12} className="box-bottom">
                {props.bottom}
            </Col>
        }
    </div>
);

export default Box;

但这是呈现以下结果:

  <div class="box {props.className}">
      Something
  </div>

它不是解析 Prop 并为自定义类更改它。这就是我打算使用它的方式

<Box
    showTitle={false}
    showBottom={false}
    className="custom-class"
    content={<MediaStatusBoxContent/>}
/>

我做错了什么？

提前致谢

Answer 1

使用Template Literals为此:

className={`box ${props.className}`}

或者用+这样写:

className={"box " + props.className}

当使用 {} 时，这意味着它是一个动态值，在其中我们可以使用 + 添加两个字符串。