Question

我遇到条件渲染问题。这是我100％工作的观点：

CreateUser

问题是当我尝试将条件按钮更改为if-else而不是两个单独的条件时：

function todoItem(todo) {
  return li('.list-item',[
    todo.editing ? input('.todo-edit', {type: 'text', value: todo.text, autofocus: true, attributes: { 'data-id': todo.id }}) : '',
    !todo.editing ? span(`.todo ${todo.completed ? '.completed' : ''}`, { attributes: { 'data-id': todo.id }}, todo.text) : '',
    button('.remove-todo', {type: 'button', value: todo.id}, 'remove'),
    todo.completed ? button('.unmark-todo', {type: 'button', value: todo.id}, 'unmark') : '',
    !todo.completed ? button('.mark-todo', {type: 'button', value: todo.id}, 'mark as done') : ''
  ]);

const view = (state$) => {
  return state$.map(todos =>
    div([
      input('.todo-input', {type: 'text', placeholder: 'Todo', value: ''}),
      ul(todos.items.map(todo => todoItem(todo))),
      footer(todos)
    ])
  );
};

它似乎将按钮切换为＆＃34; unmark＆＃34;然后回到＆＃34;标记＆＃34;再次（我已通过控制台日志确认）。我的意图映射到 .mark 和 .unmark 这两个类，所以我不认为这是一个问题......

这是一个实际错误还是我错过了什么？

Answer 1

您在dom驱动程序中遇到此错误：https://github.com/cyclejs/core/issues/228

＆＃34;问题＆＃34;是你切换的元素都是按钮。因此，当从todo.completed切换到!todo.completed时，virtual-dom将不会创建新按钮，而只是更新旧按钮的类和标签（因为您需要最小的dom更改）。

当仍然处理click事件时，这确实会同步发生。更新类名后，下一个侦听器将处理该事件，该侦听器现在也匹配（新）类名并接受该事件。第二个监听器将再次取消标记任务。

快速解决方法是为两个按钮提供key属性，以强制虚拟dom重新创建按钮。但正如我所说，它是dom驱动程序中的一个错误。

todo.completed ?
  button('.unmark-todo', {key: 'unmark', type: 'button', value: todo.id}, 'unmark') : 
  button('.mark-todo', {key: 'mark', type: 'button', value: todo.id}, 'mark as done')

CycleDOM条件渲染问题

1 个答案: