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

Question

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

findComponentRoot(..., .0.1.1.0.1.0.5.0.1:4)：找不到元素。 这可能意味着 DOM 发生了意外突变（例如，由 浏览器），通常是由于在使用表格时忘记了 a， 嵌套标签，如

、

或 ，或在

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

这是我的渲染对象：

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

提前感谢任何 cmets。

Answer 1

您输出的 html 无效。您在 div 中直接有一个 td - 它们必须是 tr 的直接子级。此外，您还有一个跨度作为 tr 的子级，这是无效的。