让 reactjs 渲染 textDecoration 的问题：'none'

Question

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

App.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

Answer 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
 },
.....