相关疑难解决方法(0)

我试图通过单击待办事项列表项来切换Font Awesome图标.这是整个组件......

import React from 'react';

import './TodoItem.scss';

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      complete: false
    }
    this.toggleComplete = this.toggleComplete.bind(this);
  }

  toggleComplete() {
    this.setState(prevState => ({
      complete: !prevState.complete
    }));
  }

  render() {
    const incompleteIcon = <span className="far fa-circle todo-item-icon"></span>;
    const completeIcon = <span className="far fa-check-circle todo-item-icon"></span>;

    return (
      <div className="todo-item" onClick={this.toggleComplete}>
        {this.state.complete ? completeIcon : incompleteIcon}
        <span className="todo-item-text">{this.props.item}</span>
      </div>
    );
  }
}

export default TodoItem;

这是我的FA 5 CDN(直接来自网站)......

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

我拍了一些React开发工具和检查员的截图......

这是React组件,但不完整(默认)

虽然完整......

检查器中的两个图标元素,我注意到默认情况下未使用的元素已被注释掉. …