无法从 child 组件中获取道具

Question

我有一个 child 组件，当在 React 组件中使用 html 拖放 api 时，它传递了道具。我正在尝试将 child 的 '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>
  );
}

也许有人可以阐明这一点？也许我没有从 react.children 以某种方式正确阅读道具。

Answer 1

您正在将其记录到控制台，因为使用函数 document.getElementById returns 和 HTMLElement，而不是 React 组件。 React 组件实际上并不存在于 DOM 中，而是呈现给 HTML 元素。您可以尝试这样做：card.getAttribute('type') 以获得结果 div

的 type 道具

无法从 child 组件中获取道具

can't get props from child component in react

children

reactjs

react-props