Javascript 尝试使用JSX中的按钮更改css类

我试图编写一个react类，其中render函数包含一个按钮，单击该按钮后，它会将css类从一个更改为另一个，并将文本从可用更改为已获取。文本更改正在工作，但CSS更改无效。我不确定我下面的代码哪里出错了。我还试着在我的类方法中编写一个切换类函数，它也不会切换。在html和JSX方面不是太强，因此任何帮助都将不胜感激。谢谢

class Singles extends React.Component {
  constructor() {
    super();
    this.state = {
      isSingle: false,
    };
  }
  toggleIsSingle() {
    this.setState({
      isSingle: !this.state.isSingle
    });
  }
  render() {
    const { name, description, id } = this.props.pet;
    const isSingle = this.state.isSingle;
    return (
      <div
        key={id}
        className={this.state.isSingle ? 'single.taken' : 'single'}
      >
        <div id="info">
          <p>{name}</p>
          <p>{description}</p>
          <div>{this.state.isSingle ? 'Taken!' : 'Available'}</div>
          <button onClick={() => this.toggleIsSingle()}>Toggle Status</button>
        </div>
      </div>
    );
  }
}

类Singles扩展了React.Component{
构造函数（）{
超级（）；
此.state={
伊森格：错，
};
}
ToggleSingle（）{
这是我的国家({
isSingle:！this.state.isSingle
});
}
render（）{
const{name，description，id}=this.props.pet；
const isSingle=this.state.isSingle；
返回(
{name}

{说明}

{this.state.isSingle？'take！':'Available'}
this.toggleIsSingle（）}>切换状态
);
}
}

这里的问题是您的类名，

是CSS类名的保留字符，因此

single.take

是无效名称，您需要将其切换为类似

single take

---

有关有效CSS类名的更多信息，请查看这里的问题是您的类名，

是CSS类名的保留字符，因此

single.take

是无效名称，您需要将其切换为类似

single take

有关有效CSS类名的更多信息，请查看非常重要：

• 必须以字母a-Z或a-Z开头
• 后面可以是：字母（A-Za-z）、数字（0-9）、连字符（“-”）和下划线（“\”）

正如@啮齿目动物87所指出的，到目前为止，问题在于类命名规则

className={this.state.isSingle？'single.take'：'single'}

此处带有句点

，请尝试使用有效字符（例如

-或

）作为类名

或者，您也可以尝试以下方法：

className={this.state.isSingle？'single take'：'single'}

这里有

single

和

take

作为

className

的一部分，允许您使用

CSS:

非常重要：

• 必须以字母a-Z或a-Z开头
• 后面可以是：字母（A-Za-z）、数字（0-9）、连字符（“-”）和下划线（“\”）

正如@啮齿目动物87所指出的，到目前为止，问题在于类命名规则

className={this.state.isSingle？'single.take'：'single'}

此处带有句点

，请尝试使用有效字符（例如

-或

）作为类名

或者，您也可以尝试以下方法：

className={this.state.isSingle？'single take'：'single'}

这里有

single

和

take

作为

className

的一部分，允许您使用

CSS:

.single.taken{
  /* Your taken Single Style here */
}