Question

处理Todo列表的早期代码草案，功能较少，有效：

        {
        return 0;
        }
      });
    return (
      <div id="Todo">
        <h1>Todo</h1>
        <form onSubmit={that.handleSubmit}>
          <table>
            {table_rows}
            <tfoot>
              <textarea name='todo-textarea' id='todo-textarea'
                onChange={that.onChange}></textarea><br />
              <button>{'Add activity'}</button>
            </tfoot>
          </table>
        </form>
      </div>
    );
  }
});

我目前的版本正在获得InvariantViolation：

react-with-addons.js：20237 Uncaught Error：Invariant Violation：findComponentRoot（...，.0.1.1.0.0：0：0.0：1.0）：无法找到元素。这可能意味着DOM意外地突变（例如，通过浏览器），通常是由于忘记了＆lt; tbody＆gt;。使用表时，嵌套标签如＆lt; form＆gt;，＆lt; p＆gt;或＆lt; a＆gt;，或在父级中使用非SVG元素。尝试使用React ID“。”检查元素的子节点。

现在的代码是：

var Todo = React.createClass(
{
mixins: [React.addons.LinkedStateMixin],
  getInitialState: function()
    {
    var result = parse(initial_todo, {
      'next_todo_index': 1,
      'items': [],
      'text': ''
      });
    return result;
    },
  handle_change: function(event)
    {
    var that = this;
    var address = jQuery(event.target).attr('data-index').split('.', 2);
    var identifier = parseInt(address[0], 10);
    for(var candidate = 0; candidate < this.state.next_todo_index;
      candidate += 1)
      {
      if (parseInt(jQuery(this.state.items[candidate]).attr('index'), 10)
        === identifier)
        {
        (this.state.items[candidate][address[1]] =
          !this.state.items[candidate][address[1]]);
        save('Todo', this.state);
        }
      }
    that.render();
    },
  handleSubmit: function(event)
    {
    event.preventDefault();
    var new_item = get_todo_item(this);
    new_item.description = this.state.text;
    this.state.items.unshift(new_item);
    document.getElementById('todo-textarea').value = '';
    save('Todo', this.state);
    if (!one_shot)
      {
      one_shot = true;
      }
    // this.forceUpdate();
    // React.render(<Todo />,
      // document.getElementById('Todo'));
    },
  onChange: function(event)
    {
    this.setState({text: event.target.value});
    },
  render: function()
    {
    var that = this;
    var table_rows = [];
    var display_item_details = function(label, item)
      {
      var html_id = item.index + '.' + label;
      return (
        <td className={label} title={label}>
          <input onChange={that.handle_change} data-index={html_id}
          className={label} type="checkbox"
          defaultChecked={item[label]} />
        </td>
        );
      };
    var display_item = function(item)
      {
      var rendered_nodes = [];
      if (item['Completed'] || item['Delete'] || item['Invisible'])
        {
        return '';
        }
      else
        {
        for(var index = 0; index < todo_item_names.length;
          index += 1)
          {
          rendered_nodes.push(
            display_item_details(todo_item_names[index], item)
            );
          }
        return (
            <tr>{rendered_nodes}
            <td className="description" dangerouslySetInnerHTML={{__html:
              converter.makeHtml(item.description)}} /></tr>
          );
        }
      };
    table_rows.push(that.state.items.map(display_item));
    table_rows.sort(function(a, b)
      {
      if (a.index > b.index)
        {
        return 1;
        }
      else if (b.index > a.index)
        {
        return -1;
        }
      else
        {
        return 0;
        }
      });
    return (
      <div id="Todo">
        <h1>Todo</h1>
        <form onSubmit={that.handleSubmit}>
          <table>
            <tbody>
              {table_rows}
            <tbody>
            <tfoot>
              <textarea name='todo-textarea' id='todo-textarea'
                onChange={that.onChange}></textarea><br />
              <button>{'Add activity'}</button>
            </tfoot>
          </table>
        </form>
      </div>
    );
  }
});

我怎么打破这个？

Answer 1

请检查您的html表格结构。除了<div id="test"></div>修正之外，<tbody>的使用也是无效的标记。

<tfoot>元素内部只能包含<tfoot>个标记。

即

<tr>

我如何在ReactJS代码中破坏这个Todo列表？

1 个答案: