点符号如何在 React.js 的功能组件中工作？

Question

While I was searching article about compound component pattern, I have found out that accessing sub-component through dot notation is possible like javascript object.

How this is possible and how it works? does this work because component is also object of javascript?

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

Answer 1

This is accomplished my simply attaching the compound component as a property to the parent component.

Attaching is how you keep the nested compound component with its parent component. The alternative is to export Item separately, and then also import it separately. In many cases the nested child component is only valid as a direct descendent of the parent component, consuming a context, or being informed how to "layout" in the DOM.

Example:

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

Menu.Item = Item;

export default Menu;

Usage:

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>
);

Demo

Demo Code:

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>
  );
}

Question

Does this work because component is also object of javascript?

No, not objects, but functional components (and class-based components) are transpiled into a regular javascript function invoked by the React framework, and as a variable reference you can attach properties to them.