传入类名以响应组件

javascript reactjs

2022-08-30 04:32:06

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

class Pill extends React.Component {

  render() {

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

}

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

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

答案 1

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

答案 2

仅供参考，用于无状态组件：

// 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>