点表示法在 React.js 的函数组件中如何工作？

Question

当我搜索有关复合组件模式的文章时，我发现可以像 javascript 对象一样通过点表示法访问子组件。

这怎么可能以及它是如何运作的？这是否有效，因为组件也是 javascript 的对象？

const App = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    <Menu.Item>Blog</Menu.Item>
    <Menu.Item>About</Menu.Item>
  </Menu>
);

Answer 1

这是通过简单地将复合组件作为属性附加到父组件来完成的。

附加是如何将嵌套复合组件与其父组件保持在一起。另一种方法是单独导出Item，然后也单独导入。在许多情况下，嵌套子组件仅作为父组件的直接后代、使用上下文或被告知如何在 DOM 中“布局”才有效。

例子：

const Menu = () => <div>Menu Component</div>
const Item = () => <div>Item Component</div>

Menu.Item = Item;

export default Menu;

用法：

import Menu from '../path/to/menu';

const App = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    <Menu.Item>Blog</Menu.Item>
    <Menu.Item>About</Menu.Item>
  </Menu>
);

演示

演示代码：

const Menu = ({ children }) => (
  <div>
    <h1>Menu Component</h1>
    {children}
  </div>
);
const Item = ({ children }) => <div>{children}</div>;

Menu.Item = Item;

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Menu>
        <Menu.Item>Home</Menu.Item>
        <Menu.Item>Blog</Menu.Item>
        <Menu.Item>About</Menu.Item>
      </Menu>
    </div>
  );
}

问题

这是否有效，因为组件也是 javascript 的对象？

不，不是对象，而是功能组件（和基于类的组件）被转换为 React 框架调用的常规 JavaScript 函数，并且作为变量引用，您可以将属性附加到它们。