我正在创建一个自定义组件,我希望能够使其足够灵活,以其他方式重用它。在它的自然形式中,它包含一个类box
,这给它一些原生样式。但是,如果我想重用这个组件并改变样式,我想用它已经包含的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>
它不解析道具并为自定义类更改道具。这就是我打算使用它的方式
<Box
showTitle={false}
showBottom={false}
className="custom-class"
content={<MediaStatusBoxContent/>}
/>
我做错了什么?
提前致谢
答案 0 :(得分:2)
+
或者使用className={"box " + props.className}
:
{}
使用+
表示其动态值时,我们可以使用:set autoindent
添加两个字符串。