如何在React中渲染Mutliple tr行

时间:2015-04-24 11:15:19

标签: javascript reactjs react-jsx

我坚持这个,当我运行代码时会出现此错误。

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>
                );
            }
        });

1 个答案:

答案 0 :(得分:1)

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