传入类名来响应组件

我试图传递一个类名给一个反应组件，以改变它的样式，但似乎无法工作:

class Pill extends React.Component {


render() {


return (
<button className="pill {this.props.styleName}">{this.props.children}</button>
);
}


}


<Pill styleName="skill">Business</Pill>

我试图改变风格的避孕药通过在班级的名称，有各自的风格。我是新的反应，所以也许我没有这样做是正确的方式。谢谢

220163 次浏览
小开
最佳答案

在 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>
);
}
小开

对于任何感兴趣的人，我在使用 Css 模块和 响应 CSS 模块时遇到了同样的问题。

大多数组件都有一个关联的 css 模块样式，在本例中，我的 按钮有自己的 css 文件，宣传片父组件也是如此。但是我想传递一些额外的样式从 宣传片到 按钮

所以 styleable 按钮看起来像这样:

纽扣

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样式处理常见的按钮样式

然后在我的组件，我想使用的 按钮，我也想修改的东西，如按钮的位置，我可以设置额外的样式在 Promo.css和通过作为 className道具。在这个例子中又称为 .button类。我可以叫它任何东西，例如 promoButton。

当然，对于 css 模块，这个类是 .Promo__button___2MVMD，而按钮是类似于 .Button__button___3972N的东西

商业广告

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} );
小开

使用 React 对字符串插值的支持，您可以执行以下操作:

class Pill extends React.Component {
render() {
return (
<button className={`pill ${this.props.styleName}`}>{this.props.children}</button>
);
}
}

小开

可以通过使用 this.props.className“插入”从父组件传递到子组件的 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 = ({ 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}会得到“药丸未定义”

我更喜欢

className={ "pill " + ( this.props.styleName || "") }

或者

className={ "pill " + ( this.props.styleName ? this.props.styleName : "") }
小开

如前所述，使用带大括号的解释表达式。

但别忘了设置默认值。
其他人则建议在 undefined时使用 OR 语句设置空字符串。

但是如果能把你的道具拿出来就更好了。

完整的例子:

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: '',
};
小开

使用 React 16.6.3和@Materials UI 3.5.1，我在 className 中使用类似于 className={[classes.tableCell, classes.capitalize]}的数组

在您的案例中尝试下面这样的操作。

class Pill extends React.Component {
render() {
return (
<button className={['pill', this.props.styleName]}>{this.props.children}</button>
);
}
}
小开

在 Typecript 中，您需要设置 HTMLAttributes和 React.FunctionComponent的类型。

在大多数情况下，您将需要将其扩展到另一个接口或类型。

const List: React.FunctionComponent<ListProps &
React.HTMLAttributes<HTMLDivElement>> = (props) => {
return (
<div className={props.className}>
<img className="mr-3" src={props.icon} alt="" />
{props.context}
</div>
);
};


interface ListProps {
context: string;
icon: string;
}

提交答案