Javascript 将类名传递给React组件

我试图将

类名

传递给

材质ui按钮组件

，但似乎无法使其工作。下面是我的尝试

尝试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>
  )}
)}

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

attributes.map（（属性，索引）=>{
const classString='classes.button'+索引；
console.log（classString）
返回(
{attribute}
)}
)}

尝试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>
  )}
)}

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

attributes.map（（属性，索引）=>{
const classString='classes.button'+索引；
console.log（classString）
返回(
{attribute}
)}
)}

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

任何帮助都将不胜感激，谢谢

• className={yourVariableName}

• className={'redDiv'}

• className={yourVariableName}

• className={'redDiv'}

---

我猜

类

是一个对象，其键为

按钮

/在material ui示例中，它们将类作为道具传递

稍微更改一下您的

classString

声明。确保您正在传递

类

对象，并且该对象的键名为

按钮

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

您应该相应地更改

classString

将其更改为：

---

const classString=classes[`class${index}`]

我猜

类

是一个对象，它的键是

按钮

/在material ui示例中，它们将类作为道具传递

稍微更改一下您的

classString

声明。确保您正在传递

类

对象，并且该对象的键名为

按钮

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

您应该相应地更改

classString

将其更改为：

---

const classString=classes[`class${index}`]
材质UI在js中实现CSS，并使用材质UI/styles“with styles”高阶组件。看看网站上的按钮演示，它非常有用。
材质UI在js中实现CSS，并使用材质UI/styles“with styles”高阶组件。看看网站上的按钮演示，它非常有用
甚至更好：
const classString=`${classes.Button}${index}；`。但我怀疑向css类添加数组索引是否是正确的方法。如果OP想要为这个按钮应用css，那么它应该是一个
id
，或者可以通过使用javascript.com来实现。但让他澄清一下这个问题。是通过传递className prop还是通过className prop传递值。这只是一个额外的评论，以防OP没有考虑到这一点，他可以考虑使用另一个解决方案。这并没有剥夺他澄清问题的机会，因为你的回答为他提供了必要的提示。谢谢你的回复。当我将其更改为classes.button+“${index}”时，它实际上会给我一个警告，说“意外的模板字符串表达式”，但它仍然不起作用。当我将其更改为“const classString=”classes.button“”（原始类）时，该按钮仍然无法获取该类，只有在我删除引号时，该按钮才会收到该类。我相信我输入了错误的回勾号，它不再给我警告。但是，按钮仍然没有接收该类。这可能与我使用的是with样式有关吗？更好的是：
const classString=`${classes.button}${index}；`。但我怀疑向css类添加数组索引是否是正确的方法。如果OP想要为这个按钮应用css，那么它应该是一个
id
，或者可以通过使用javascript.com来实现。但让他澄清一下这个问题。是通过传递className prop还是通过className prop传递值。这只是一个额外的评论，以防OP没有考虑到这一点，他可以考虑使用另一个解决方案。这并没有剥夺他澄清问题的机会，因为你的回答为他提供了必要的提示。谢谢你的回复。当我将其更改为classes.button+“${index}”时，它实际上会给我一个警告，说“意外的模板字符串表达式”，但它仍然不起作用。当我将其更改为“const classString=”classes.button“”（原始类）时，该按钮仍然无法获取该类，只有在我删除引号时，该按钮才会收到该类。我相信我输入了错误的回勾号，它不再给我警告。但是，按钮仍然没有接收该类。这是否可能与我使用的是withStyles这一事实有关？限制条件是
yourVariableName
应该是字符串或
null
/
未定义的
。限制条件是
yourVariableName
应该是字符串或
null
/
未定义的
。