传递类名以响应组件

Harry小胖2020-03-13

我试图将类名传递给react组件以更改其样式，但似乎无法正常工作：

class Pill extends React.Component {

  render() {

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

}

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

我正在尝试通过传递具有相应样式的类的名称来更改药丸的样式。我是React的新手，所以也许我做的方式不正确。谢谢

Eva小胖2020/03/13 00:28:34

借助React对字符串插值的支持，您可以执行以下操作：

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

飞云西里神乐2020/03/13 00:28:34

您可以使用来“内插”从父组件传递到子组件的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>
  }
}

蛋蛋十三2020/03/13 00:28:33

pill ${this.props.styleName} 当您不设置道具时，将得到“药丸未定义”

我更喜欢

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

要么

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer