React点赞/取消点赞组件语法问题：如何正确渲染带样式的图标？

你的代码存在两处关键语法错误，以下是修正方案及说明：

错误点分析 #

1. JSX中class属性命名错误：React的JSX语法里不能直接使用class（这是JavaScript关键字），必须替换为className。
2. render返回内容结构错误：render方法只能返回单个React元素，你错误地将onClick事件处理逻辑作为独立对象返回，正确做法是把它作为<i>标签的属性绑定。

修正后的完整代码 #

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return (
        <i 
          className="fal fa-thumbs-down"
          onClick={() => this.setState({ liked: false })}
        ></i>
      );
    }

    return (
      <i 
        className="fal fa-thumbs-up"
        onClick={() => this.setState({ liked: true })}
      ></i>
    );
  }
}

关键修改说明 #

• 替换class为className：符合JSX的语法规范，确保CSS类能正常生效。
• 绑定onClick到<i>标签：将事件处理函数直接作为标签属性，既符合React渲染规则，又能正确触发状态切换。
• 保证render返回单一元素：每次渲染都只返回一个带事件属性的图标元素，避免语法错误。

内容的提问来源于stack exchange，提问作者noclist