react.js 的一些问题

Question

我最近在研究 react.js，现在我有两个问题：

文件结构就像

>public
>src
   >components
      >img
         x.png
      Item.js
   App.js
   index.js

项目.js：

import React from 'react';

class Item extends React.Component{
    constructor(props){
        super(props);
    }
    
    render(){
        return(
            <li className="todo-app__item">
                <div className="todo-app__checkbox">
                    <input type="checkbox" id={this.props.num} 
                        checked={this.props.completed} onClick = {this.props.onClick}/> 
                    <label htmlFor={this.props.num}></label>
                </div>
                <h1 className="todo-app__item-detail">{this.props.text}</h1>
                <img src='./components/img/x.png' className="todo-app__item-x"/>
            </li>
        );
    }
}

export default Item;

应用程序.js

import './App.css';
import React from 'react';
import Item from './components/Item.js';

class Main extends React.Component{
  constructor(props){
        super(props);
    this.state={tasks: []}
    }

  handleKeyDown = (e)=>{
    if (e.key === 'Enter') {
      this.setState (prevState => ({
        tasks: [...prevState.tasks, {content: e.target.value, completed: false}]
      }));
    }
  }

  handleClick = (e) =>{
    this.setState (prevState => {
      let newTasks = prevState.tasks.slice();
      newTasks[e].completed = !prevState.tasks[e].completed;
      return{tasks: newTasks};
    })
  }

  /*displayAll = () =>{

  }

  displayActive = () =>{

  }

  displayCompleted = () =>{

  }

  deleteCompleted = () =>{

  }*/

  render(){
    return(
      <section className="todo-app__main">
        <input className="todo-app__input" 
          placeholder="What needs to be done?"  onKeyDown={this.handleKeyDown} />
        <ul className="todo-app__list" id="todo-list">
          {this.state.tasks.map(item => 
            <Item num={this.state.tasks.indexOf(item)} text={item.content} completed={item.completed} 
              onClick={() => this.handleClick(this.state.tasks.indexOf(item))}/>)}
        </ul>
        <footer className="todo-app__footer" id="todo-footer">
          <div className="todo-app__total"> {this.state.tasks.filter(e=>e.completed===false).length} Left</div>
          <ul className="todo-app__view-buttons">
            <button>All</button>
            <button>Active</button>
            <button>Complete</button>
          </ul>
          <div className="todo-app__clean">
            <button>Clear complete</button>
          </div>
        </footer>
      </section>
    );
  }
}

1. 我的x.png显示不正确。 如何解决？
2. 最下面的三个按钮，希望completed可以做一些类似显示满足 task[1]=true 的任务而不删除 item 的事情。 我该如何实施？

Answer 1

1. 可以修改img的src属性，现在相对路径不对

<img src='./img/x.png' className="todo-app__item-x"/>

2. 使用反应状态渲染不同的按钮

{this.state.tasks[x].completed && <button>Complete</button>} 

例如：当任务 x 完成时，显示按钮。