0

我是 reactjs 的新手，我正在寻求帮助，在 reactjs 中为数组中的已完成项目创建一个直通功能（textDecoration）。所有项目都显示为已完成并显示直通，尽管它们并未全部完成。我尝试查看许多不同的教程，但仍然无法让 textDecortion: 'none' 显示未完成的项目。我希望已完成的项目有一个直通，将它们标记为已完成，而未完成的项目没有直通。但是，无论它们是否完成，我得到的是一条贯穿所有项目的线路。希望能帮助理解我哪里出错了。谢谢你。

应用程序.js：-

    import React, { Component } from 'react';
    import './App.css';
    import Todos from './components/Todos';

    class App extends Component {
        state = {
          todos: [

            {
              id: 1,
              title: "put out the trash",
              completed: "true"
            },

            {
              id: 2,
              title: "dinner with wife",
              completed: "true"
            },

            {
              id: 3,
              title: "meeting with boss",
              completed: "false"
            }
          ]
        };

    render() {

      return (
        <div className="App">
         
          <Todos todos = {this.state.todos}/>
        </div>
      );
    }
    }
    export default App;

TodoItem.js:-

import React, { Component } from 'react'; import PropTypes from 'prop-types';

export class TodoItem extends Component {

    getStyle = () => {
      return {
        background: "#f4f4f4",
        padding: "10px",
        borderBottom: "1px #ccc dotted",
        textDecoration: this.props.todo.completed ? "line-through" : "none",
      };
    };
render() {

    return (
       
        <div style={this.getStyle()}>
        
            <p>{ this.props.todo.title }</p>
        </div>
    )
} }

TodoItem.propTypes = { todo: PropTypes.object.isRequired }

export default TodoItem
4

1 回答 1

1

completed您通过设置为字符串而不是布尔值犯了一个小错误

 todos: [{
      id: 1,
      title: "put out the trash",
      completed: "true" // this is string not boolean
 },
.....

因此，当我们进行比较时this.props.todo.completed ? "line-through" : "none"，它总是会给出true

如下将其更改为布尔值，它将起作用

 todos: [{
      id: 1,
      title: "put out the trash",
      completed: true
 },
.....
于 2020-06-25T15:25:42.343 回答