Question

我已经看到一些库在React中使用点符号组件

例如

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

这是在类组件中使用static关键字例如

const Item = () => ...code

class Menu extends Component {
  static Item = Item

  ...code

由于带有React钩子的功能组件不是“组件”类，因此该模式仍可以以某种方式与功能组件一起使用（例如访问原型之类的东西吗？）

这还可以吗？

Answer 1

此模式称为复合组件。要将模式与功能组件一起使用，只需添加子组件（Item）作为主要组件（Menu）的属性。

您可以在Kent C. Dodds文章-React Hooks: Compound Components 中找到更多信息。

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>

如何使用点数表示法使用React钩子对元件进行反应？

1 个答案: