не может получить реквизит от дочернего компонента в реакции - PullRequest
Новая
       39

не может получить реквизит от дочернего компонента в реакции

0 голосов
/ 07 апреля 2020

У меня есть дочерний компонент, которому были переданы реквизиты при использовании html api drag drop в компоненте реагирования. Я пытаюсь записать реквизит ребенка «type» на консоль, но я не могу получить к нему доступ с помощью card.type

, если я зарегистрирую «card» на консоли, я получу следующее: 

<div type="allowed2" id="item-2" class="card" draggable="true" style="display: none;">
  <p>card 2</p>
</div>

Вот мой текущий код и моя попытка прочитать реквизит: 

const drop = (e) => {
  e.preventDefault();
  const card_id = e.dataTransfer.getData('item_id');
  const card = document.getElementById(card_id);

  let i = 0;
  let count = 0;
  for (i in props.allowedtypes){
    console.log(card);

    if (props.allowedtypes[i] !== card.type){ //need to check the card.type against my allowed types
      count++;
    }

    if (count === props.allowedtypes.length){
      alert('sorry that file type is not accepted');
      return;
    }

    i++;
  }

  e.target.appendChild(card);
}

const dragOver = e => {
  e.preventDefault();

  return (
    <div id={props.id} onDrop={drop} onDragOver={dragOver} className = {props.className} allowedtypes={props.allowedTypes}>
      {props.children}
    </div>
  );
}

Может быть, кто-то может пролить свет на это? Может быть, я как-то не правильно читаю реквизит от Reaction.children.

1 Ответ

0 голосов
/ 07 апреля 2020

Вы получаете это зарегистрировано к консоли, потому что использование функции document.getElementById возвращает HTMLElement, а не компонент React. Реактивные компоненты на самом деле не существуют в DOM, вместо этого они отображаются в HTML элементах Вместо этого вы можете попробовать сделать это: card.getAttribute('type'), чтобы получить type опору в результате div

...