如何在 React 中渲染多个 tr 行

Question

我受困于此，当我 运行 代码出现此错误时。

Uncaught Error: Invariant Violation: findComponentRoot(..., .0):
Unable to find element. This probably means the DOM was unexpectedly
mutated (e.g., by the browser), usually due to forgetting a <tbody>
when using tables, nesting tags like <form>, <p>, or <a>, or using
non-SVG elements in an <svg> parent. Try inspecting the child nodes of
the element with React ID ``.

请帮我解决这个问题。

var TicketsList = React.createClass({
            render: function() {
                var TicketNodes = this.props.data.map(function (ticket){
                    return(
                        <tr>
                            <td className="txt-c">
                                <span className="pr-5 f-18" title="Responses">
                                    <span>{ticket.responses}</span>
                                    <i className="fa fa-comments-o"></i> 
                                </span>
                                <span className="pr-5 f-18" title="Attachments">
                                    <span>{ticket.attachments}</span>
                                    <i className="fa fa-paperclip"></i> 
                                </span>
                            </td>
                            <td>{ticket.message}</td>
                            <td>{ticket.recorded_support_type}</td>
                            <td>{ticket.recorded_sub_type}</td>
                            <td>{ticket.recorded_priority}</td>
                            <td>{ticket.recorded_status}</td>
                            <td>{ticket.submitted_by_name}</td>
                            <td>{ticket.assigned_to}</td>
                        </tr>
                    );
                });
                return (
                    <tbody>
                        {TicketNodes}
                    </tbody>
                );
            }
        });

Answer 1

您是否在其他地方用 <table> 包装了这些内容？ <tbody> 元素应始终包含在 <table> 元素中。