javascript - 将 className 传递给 React 组件

Question

我试图将classname传递给material-ui Button组件，但似乎无法让它工作。以下是我的尝试。

尝试 1:

attributes.map((attribute, index) => {
  const classString = 'classes.button' + index;
  console.log(classString)
  return (
    <Button className={classString} onClick={this.handleClick.bind(this, attribute)}> 
     {attribute} 
    </Button>
  )}
)}

尝试 2:

attributes.map((attribute, index) => {
  const classString = 'classes.button' + index;
  console.log(classString)
  return (
    <Button className={'${classString}'} onClick={this.handleClick.bind(this, attribute)}>
      {attribute}
    </Button>
  )}
)}

我也尝试过 classnames npm 包，但即使这样也不起作用。

如有任何帮助，我们将不胜感激，谢谢!

Answer 1

我猜classes是一个键为 button 的对象。//在 Material-ui 示例中，它们传递 classes如props

更改您的 classString声明一下。确保您通过 classes对象，它的键名为 button .

attributes.map((attribute, index) => {
  const classString = classes.button + `${index}`; // best practice to add string to a number
  return (
    <Button className={classString} onClick={this.handleClick.bind(this, attribute)}> 
      {attribute} 
     </Button>
  )}
)}

如果您仍然遇到此问题，则问题出在 classes 上。目的。要测试它，请更改行 const classString = classes.button + ${索引} ;至

const classString = 'random-class';

并检查按钮是否正在获取类 random-class

编辑:

自从您的 classes对象是这样的:

{
  class1: _class2-something-15443",
  class2: ....,
  ...
}

你应该改变classString相应地。

将其更改为: const classString = classes[`class${index}`];