Question

我尝试使用此模式创建可重复使用的下拉菜单包装器组件：

class DropdownMenu extends React.Component {

  render() {
    return (
      <span>
        {React.cloneElement(
          this.props.children, 
          {  
            menuOpen: this.props.menuOpen,
            toggleMenu: this.props.toggleMenu
          }
        )}
      </span>
    );
  }
}

const HeaderUserDropdown = ({menuOpen, toggleMenu }) => (
  <DropdownMenu>
    <div className={menuOpen ? 'visible' : ''}>
      <button onClick={toggleMenu} />
    </div>
  </DropdownMenu>
)

但是我发现了Warning: Unknown props menuOpen, toggleMenu on <div> tag. Remove these props from the element.的错误。我知道我可以使用data-来使其正常工作，但这看起来有点像hacky。将这些道具传递给孩子们的正确方法是什么？

Answer 1

React区分以小写字母（例如<div>）编写的HTML元素和以大写字母开头的React组件。

在您的代码中，您尝试克隆HTML div元素并添加属性menuOpen和toggleMenu，但<div>不支持这些属性，因此警告。您需要在HTML元素上设置自定义属性，您需要使用data-前缀约定。

将道具传递给儿童时出现未知道具警告

1 个答案: