Неопределенное нарушение инварианта: целевой контейнер не является элементом DOM - PullRequest
Новая
       4

Неопределенное нарушение инварианта: целевой контейнер не является элементом DOM

0 голосов
/ 22 февраля 2019

Это мой компонент, который создает стиль ввода флажка. Все работает как надо , но есть это сообщение об ошибке, и я не знаю почему.

'Uncaught Invariant Violation: целевой контейнер не является элементом 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)
    }

Ответы [ 3 ]

0 голосов
/ 22 февраля 2019

Вот простой пример того, как вы можете изменить стиль из состояния. 

class Sample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      test: true,
      color: 'success'
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.checked

    this.setState({
      [name]: value,
      color: value ? 'success' : 'danger'
    });
    
  }

  render() {
    return (
      <form>
        <label>
          Test:
          <input
            name="test"
            type="checkbox"
            checked={this.state.test}
            onChange={this.handleInputChange} />
        </label>
        <ReactBootstrap.Button className='ml-3' variant={this.state.color}>Test</ReactBootstrap.Button>
      </form>
    );
  }
}

ReactDOM.render(
  <Sample />,
  document.getElementById('root')
);
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">

<div id="root" />
0 голосов
/ 22 февраля 2019

Я нашел решение на этом.Требуется проверить, является ли элемент цикла FOR элементом DOM, если нет, переходить к следующему. 


  var els = document.getElementsByClassName('switch-3d-permissao');

  for (var i in els) {
    var element = els[i];

    // Check if it is an object
    if (typeof element !== 'object') {
      continue;
    }

    // ...
  }
0 голосов
/ 22 февраля 2019

Это связано с использованием for..in для итерации по NodeList.Цикл for..in также выполняет итерацию по неперечислимым свойствам объекта, включая длину, что дает ошибку, что Target Container не является элементом 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>

См. методы итерационных документов из MDN

...