javascript - 未捕获的不变违规 : Target container is not a DOM element

Question

这是我创建复选框输入样式的组件。 一切运行正常，但出现此错误消息，我不知道为什么。

“未捕获的不变违规:目标容器不是 DOM 元素。”

Stackoverflow 要求我在提交这个问题之前发布更多评论，但我真的没有更多信息可以在这里设置......所以我将发布这个问题我正在使用的版本。

React版本:React v16.8.3

React DOM 版本:React v16.8.3

通天塔:https://unpkg.com/babel-standalone@6.15.0/babel.min.js

    /* global ReactDOM, React */

    class Switch3dPermissao extends React.Component {

      constructor(props) {
        super(props);
        this.state = { checked: props.defaultChecked };
      }

      toggle = () => {
        this.setState({
          checked: !this.state.checked
        })
      }

      render() {

        return (
          <div>
            <label className={'mr-3 switch switch-3d switch-'+this.props.type}>
              <input type="hidden" name={this.props.id} value={this.props.offvalue} />
              <input
                id={this.props.id}
                name={this.props.id}
                value={this.props.value}
                className="switch-input"
                type="checkbox"
                checked={ this.state.checked ? true : false }
                onChange={ this.toggle }
              />
              <span className="switch-label"></span>
              <span className="switch-handle"></span>
            </label>
            <label htmlFor={ this.props.id } className="cursor-pointer" dangerouslySetInnerHTML={{ __html: this.props.html }}></label>
          </div>
        );
      }
    }

    // Elementos com esta classe
    var els = document.getElementsByClassName('switch-3d-permissao');

    for (var i in els) {

      var element = els[i];

      // Is default checked?
      var isChecked = false;
      var value = '1';
      if (element.attributes !== undefined) {

        if (element.attributes.checked !== undefined) {
          isChecked = true;
        }

        if (element.attributes.value !== undefined) {
          value = element.attributes.value.textContent;
        }
      }

      var id = null;
      var type = 'danger';
      var offvalue = '0';
      if (element.dataset !== undefined) {

        // data-id (The form checkbox id)
        if (element.dataset.id !== undefined) {
          id = element.dataset.id;
        }

        // data-type warning | danger | primary | info | success
        if (element.dataset.type !== undefined) {
          type = element.dataset.type;
        }

        // Valor para quando o checkbox nao esta checado
        if (element.dataset.offvalue !== undefined) {
          offvalue = element.dataset.offvalue;
        }
      }

      ReactDOM.render(<Switch3dPermissao id={id} type={type} html={element.innerHTML} defaultChecked={isChecked} value={value} offvalue={offvalue} />, element)
    }

Answer 1

这是因为使用 for..in 来迭代 NodeList 。 for..in 循环还会迭代对象的不可枚举属性，包括长度，这会给出目标容器不是 DOM 元素的错误。

要解决此问题，您可以使用 for..of 循环来仅循环拥有它自己的属性。

/* global ReactDOM, React */

class Switch3dPermissao extends React.Component {

  constructor(props) {
    super(props);
    this.state = { checked: props.defaultChecked };
  }

  toggle = () => {
    this.setState({
      checked: !this.state.checked
    })
  }

  render() {

    return (
      <div>
        <label className={'mr-3 switch switch-3d switch-'+this.props.type}>
          <input type="hidden" name={this.props.id} value={this.props.offvalue} />
          <input
            id={this.props.id}
            name={this.props.id}
            value={this.props.value}
            className="switch-input"
            type="checkbox"
            checked={ this.state.checked ? true : false }
            onChange={ this.toggle }
          />
          <span className="switch-label"></span>
          <span className="switch-handle"></span>
        </label>
        <label htmlFor={ this.props.id } className="cursor-pointer" dangerouslySetInnerHTML={{ __html: this.props.html }}></label>
      </div>
    );
  }
}

// Elementos com esta classe
var els = document.getElementsByClassName('switch-3d-permissao');

for (var element of els) {


  // Is default checked?
  var isChecked = false;
  var value = '1';
  if (element.attributes !== undefined) {

    if (element.attributes.checked !== undefined) {
      isChecked = true;
    }

    if (element.attributes.value !== undefined) {
      value = element.attributes.value.textContent;
    }
  }

  var id = null;
  var type = 'danger';
  var offvalue = '0';
  if (element.dataset !== undefined) {

    // data-id (The form checkbox id)
    if (element.dataset.id !== undefined) {
      id = element.dataset.id;
    }

    // data-type warning | danger | primary | info | success
    if (element.dataset.type !== undefined) {
      type = element.dataset.type;
    }

    // Valor para quando o checkbox nao esta checado
    if (element.dataset.offvalue !== undefined) {
      offvalue = element.dataset.offvalue;
    }
  }

  ReactDOM.render(<Switch3dPermissao id={id} type={type} html={element.innerHTML} defaultChecked={isChecked} value={value} offvalue={offvalue} />, element)
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div class="switch-3d-permissao" data-id="status" checked>Pode fazer login no sistema?</div>

参见methods of iteration docs from MDN