传入类名称来响应组件
我试图传递一个类名到一个反应组件来改变它的风格，似乎无法工作：
class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> 我试图通过传递具有各自风格的class级名称来改变药丸的风格。 我对React是新手，所以也许我没有这样做。 谢谢
在React中，当你想传递一个解释expression式时，你必须打开一对花括号。 尝试：
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> ); }
你也可以这样做：
class Pill extends React.Component { render() { return ( <button { ...this.props }>{ this.props.children }</button> ); } } <Pill className="skill">Business</Pill>
对于任何有兴趣的人来说，在使用css模块和反应css模块时遇到了同样的问题。
大多数组件都有一个关联的css模块样式，在这个例子中，我的Button有自己的CSS文件， Promo父组件也是如此。 但是我想把一些额外的样式传递给Promo中的 Button
所以style能够button看起来像这样：
Button.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类
然后在我想要使用button的组件中，我也想修改button的位置等东西，我可以在Promo.css设置额外的样式，并作为className prop来传递。 在这个例子中再次调用.button类。 我可以把它叫做promoButton 。
当然，用css模块这个类将是.Promo__button___2MVMD而button之一就像.Button__button___3972N
Promo.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} );
您可以通过使用this.props.className将从父组件传递的className“插入”到子组件来实现此this.props.className 。 示例如下：
export default class ParentComponent extends React.Component { render(){ return <ChildComponent className="your-modifier-class" /> } } export default class ChildComponent extends React.Component { render(){ return <div className={"original-class " + this.props.className}></div> } }
仅供参考，对于无状态组件：
// 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 = ( props ) => <div className={ `some-css-className ${ props.className }` }> { props.children } </div>
将呈现：
<div class="parent-component"> <div class="some-css-className parent-component__child"> ... </div> </div>
当你不设置道具时， pill ${this.props.styleName}将会得到“pill undefined”
我更喜欢
className={ "pill " + ( this.props.styleName || "") }
要么
className={ "pill " + ( this.props.styleName ? this.props.styleName : "") }
利用React对string插值的支持，您可以执行以下操作：
class Pill extends React.Component { render() { return ( <button className={`pill ${this.props.styleName}`}>{this.props.children}</button> ); } }
