你如何用反應鈎子做點符號反應組件？

Question

我見過一些庫在 React 中使用點符號組件

例如

<Menu>
   <Menu.Item>Item 1</Menu.Item>
   <Menu.Item>Item 2</Menu.Item>
</Menu>

這是在 class 組件中使用 static 關鍵字，例如

const Item = () => ...code

class Menu extends Component {
  static Item = Item

  ...code

由於帶有 React 鈎子的功能組件不是 class 組件，因此這種模式仍然可以以某種方式與功能組件一起使用（例如訪問原型或其他東西嗎？）

這還能做嗎？

Answer 1

這種模式稱為復合組件。 要將模式與功能組件一起使用，只需添加子組件 ( Item ) 作為主組件 ( Menu ) 的屬性。

您可以在肯特 C 中找到更多信息。 Dodds 文章 - React Hooks：復合組件。

 const Item = ({ children }) => (<li>{children}</li>); const Menu = ({ children }) => (<ul>{children}</ul>); Menu.Item = Item; ReactDOM.render( <Menu> <Menu.Item>Item 1</Menu.Item> <Menu.Item>Item 2</Menu.Item> </Menu>, root );

 <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 id="root"></div>