React/Flux: 渲染时出现奇怪的错误

Question

我在 React 中动态渲染组件时遇到此错误

findComponentRoot(..., .0.1.1.0.1.0.5.0.1:4): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a 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

我检查了标记，看起来不错。有时错误会在元素上发生变化，我的意思是，有时它似乎会影响某个元素，有时它会出现在其他元素上。

这是我的渲染对象：

render: function(){

    var _slots = function(id, h, handleClick){

        //react way to do this
        var daysforSlot = this.props.workingDays.map(function(day, i){

            var spanActive = this.state.appointments.map(function(appointment){
                            var _activeClass = null;
                            var _s = null;

                            if(h.hour+day === appointment.hour+appointment.day){
                                _activeClass = 'active'
                            }

                            if(_activeClass){
                                _s = <span className='active'>{appointment.patient.name}</span>
                            }


                            return (  {_s}  )
            });

            return (
                <td id={h.hour+day} onClick={handleClick.bind(null, {hour: h.hour, day:i})}>
                    {spanActive}
                </td>
            )
    }.bind(this));


    return(
            <div>
                <td>{h.text}</td>
                <span>{daysforSlot}</span>
            </div>
        )

    }.bind(this);

    //creates the working hours for the days and bind the click
    //handler to the hour slots
    var _schedule = this.props.workingHours.map(function(h, i){

        return (
                <tr>
                  <span>{_slots(i, h, this.handleClick)}</span>
                </tr>
            )
    }.bind(this));

    return(
        <span>
            {_schedule}
        </span>
    )
}

提前感谢您的任何评论。

Answer 1

您输出的html无效。你有一个直接在 div 内的 td - 它们必须是 tr 的直接 child。你也有一个跨度作为 tr 的 child，这是无效的。

React/Flux: 渲染时出现奇怪的错误

React/Flux: strange error while rendering

javascript

render

reactjs