Question

我已对此进行了更新

我正在尝试有条件地呈现CSS类...

我目前在我的无状态组件中拥有这个：

<input className= {props.completed && "strike-through"} type="checkbox" onClick= {() => props.onDone(todo)} />

如您所见，我已经设置了它（假设它是正确的），以基于props.completed的条件应用CSS类，该条件表示在我的状态下分配给this.state.completed的布尔值对象。

我试图通过将props.onDone(todo)传递到有状态组件来实现所有这一切，以选中/取消选中复选框。这连接到处理程序handleComplete(todo)，我想使用它来更改this.state.completed的状态，从而更改无状态组件中的CSS样式。到目前为止，我已经有了它：

  handleComplete(todo) {
   var completedTodo = todo.id;
   var found =this.state.todos.find(todoBeforeComplete=>todoBeforeComplete.id === completedTodo);
     if(found) found.completed = !found.completed;
     this.setState({ 
     completed: found.completed,
     todos: [...this.state.todos]
  });
  }

通过这样做，我已经能够管理将完成状态更改为T / F。但是由于某种原因，它并没有像我想要的那样改变CSS类...

Answer 1

您的输入标签应该可以工作，但是您最好执行react recommends-传递纯字符串或使用ckassnames库-非常方便。

现在有关状态：将待办事项作为对象（id是关键）会更好，例如：

state = {
  ...
  todos: {
    1: { 
       id: 1,
       name: 'todo1',
       completed: true,
    },
    2: { 
       id: 2,
       name: 'todo2',
       completed: false,
    }
  }
}

然后在toggleComplete中应该做什么：

toggleComplete(todoId) {
  this.setState(({ todos }) => ({ 
    todos: { 
      ...todos,
      todoId: {
        ...todos.todoId,
        completed: !state.todos.todoId.completed
      }
    }
  }))
}

然后在您可以使用的渲染器中映射待办事项对象

Object.keys(this.state.todos).map()
// or
_.values(this.state.todos).map()  // [https://lodash.com/docs/4.17.10#values][2]
// or 
_.map(this.state.todos, todo => {...})

Answer 2

在JSX下使用条件时，尝试使用带有“模板文字”而不是字符串的类名，如下所示：

<input className= {`${props.completed ? "strike-through" : ""}`} type="checkbox" onClick= {() => props.onDone(todo)} />

此外，建议使用三元运算符，当不满足您的条件时返回空字符串。否则，稍后您可能最终在html代码中看到classname =“ false”。

尝试在React中有条件地样式化时我在做什么错？

2 个答案: