react原生动态添加多个className会报错
var nwdbtn = "btn"
var nwdbtnLg = "btn-lg"
return (
<button className={nwdbtn nwdbtnLg}>button</button>
)
解决方案classname库
从一个极其简单的button组件看如何动态传入class
button组件
import React, {PureComponent} from "react"
import classNames from 'classnames';
class Button extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
}
render() {
const {
type,
size
} = this.props;
console.log(this.props)
console.log(size)
console.log(type)
let sizeCls = '';
switch (size) {
case 'large':
sizeCls = 'lg';
break;
case 'small':
sizeCls = 'sm';
break;
default:
break;
}
let btnClass = classNames("btn",{
[`btn-${sizeCls}`]: sizeCls,
[`btn-${type}`]: type
});
return (
<button className={btnClass}>button</button>
)
}
}
export default Button;
引用button组件
import React, {PureComponent} from "react"
import Button from "component/button"
class NwdPage extends React.Component {
constructor(props){
super(props)
}
componentDidMount() {
var _this = this;
}
render () {
return (
<div><Button size="small" type="primary"></Button></div>
)
}
}
export default NwdPage