未知道具道具路過時，孩子

我想用這個模式來創建可重用的下拉菜單中的包裝部件警告：未知道具道具路過時，孩子

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-爲了讓這個工作正常，但這似乎有點哈克。將這些道具傳遞給孩子的正確方法是什麼？

來源

2017-08-09 flimsy

我認爲你必須重新檢查你的代碼兩次。那'menuOpen：this.props，menuOpen，'你應該改變那個'，'爲'。' –

謝謝，修正了。無論如何，這只是僞代碼。 – flimsy

React區分以小寫字母（例如<div>）寫的HTML元素和以大寫字母開頭的React組件。

在您的代碼中，您嘗試克隆HTML div元素並添加屬性menuOpen和toggleMenu，但這些屬性不受<div>支持，因此爲警告。您需要在HTML元素上設置自定義屬性，您需要使用data-前綴約定。

來源

2017-08-09 07:32:08

所以沒有'data-'前綴就沒有辦法使用這種模式？ – flimsy

正確。 React會打印警告，因爲它不會在基礎HTML元素上設置不受支持的屬性。 –

未知道具道具路過時，孩子

回答

相關問題