Question

我在使用react

动态渲染组件时遇到此错误

findComponentRoot（...，.0.1.1.0.1.0.5.0.1：4）：无法找到元素。这可能意味着DOM意外地发生了突变（例如，通过浏览器），通常是因为在使用表时遗忘了嵌套标签，例如＆lt; form＆gt;，＆lt; p＆gt;或＆lt; a＆gt;，或者使用非SVG元素＆LT; SVG＆GT;家长。尝试使用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的直接子。你也有一个span作为tr的子，这是无效的。

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

1 个答案: