我正在尝试将类名传递给 react 组件以更改其样式，但似乎无法正常工作：
class Pill extends React.Component {
render() {
return (
<button className="pill {this.props.styleName}">{this.props.children}</button>
);
}
}
<Pill styleName="skill">Business</Pill>
我试图通过传入具有相应样式的类的名称来更改药丸的样式。我是 React 的新手，所以也许我没有以正确的方式做这件事。谢谢
在 React 中，当你想传递一个解释表达式时，你必须打开一对花括号。尝试：
render () {
return (
<button className={`pill ${ this.props.styleName }`}>
{this.props.children}
</button>
);
}
使用类名npm 包
import classnames from 'classnames';
render() {
return (
<button className={classnames('pill', this.props.styleName)}>
{this.props.children}
</button>
);
}
仅供参考，对于无状态组件：
// ParentComponent.js
import React from 'react';
import { ChildComponent } from '../child/ChildComponent';
export const ParentComponent = () =>
<div className="parent-component">
<ChildComponent className="parent-component__child">
...
</ChildComponent>
</div>
// ChildComponent.js
import React from 'react';
export const ChildComponent = ({ className, children }) =>
<div className={`some-css-className ${className}`}>
{children}
</div>
将呈现：
<div class="parent-component">
<div class="some-css-className parent-component__child">
...
</div>
</div>
pill ${this.props.styleName} 当你不设置props时会得到“pill undefined”
我更喜欢
className={ "pill " + ( this.props.styleName || "") }
或者
className={ "pill " + ( this.props.styleName ? this.props.styleName : "") }
对于任何感兴趣的人，我在使用css modules和react css modules时遇到了同样的问题。
大多数组件都有一个关联的 css module样式，在这个例子中，我的Button有自己的 css 文件，Promo父组件也是如此。但我想将一些额外的样式从Promo传递给Button
所以style能够按钮看起来像这样：
按钮.js
import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'
class Button extends Component {
render() {
let button = null,
className = ''
if(this.props.className !== undefined){
className = this.props.className
}
button = (
<button className={className} styleName='button'>
{this.props.children}
</button>
)
return (
button
);
}
};
export default CSSModules(Button, styles, {allowMultiple: true} )
在上面的 Button 组件中，Button.css样式处理常见的按钮样式。在这个例子中只是一个.button类
然后在我想使用Button 的组件中，我还想修改按钮的位置等内容，我可以设置额外的样式Promo.css并作为classNameprops传递。在这个例子中再次调用.button类。我可以称之为任何东西，例如promoButton。
当然，对于 css module，此类将是，.Promo__button___2MVMD而按钮将是类似的.Button__button___3972N
促销.js
import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './Promo.css';
import Button from './Button/Button'
class Promo extends Component {
render() {
return (
<div styleName='promo' >
<h1>Testing the button</h1>
<Button className={styles.button} >
<span>Hello button</span>
</Button>
</div>
</Block>
);
}
};
export default CSSModules(Promo, styles, {allowMultiple: true} );
正如其他人所说，使用带花括号的解释表达式。
但不要忘记设置默认值。
其他人建议使用 OR 语句来设置空字符串 if undefined。
但最好是声明你的 Props。
完整示例：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Pill extends Component {
render() {
return (
<button className={`pill ${ this.props.className }`}>{this.props.children}</button>
);
}
}
Pill.propTypes = {
className: PropTypes.string,
};
Pill.defaultProps = {
className: '',
};