点符号是如何用反应钩子来反应元件的？

Question

我见过一些库在React中使用点符号组件

例如：

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

这是在类组件中使用静态关键字。

const Item = () => ...code

class Menu extends Component {
  static Item = Item

  ...code

由于带有React的功能组件不是类组件，这种模式是否仍然可以与功能组件一起使用(例如访问原型或其他什么？)

还能这样做吗？

Answer 1

这种模式被称为复合成分。要将模式与功能组件一起使用，只需添加子组件(Item)作为主组件(Menu)的属性即可。

你可以在肯特C.道兹的文章- 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>

​