点符号在 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>
  );
}

问题

Does this work because component is also object of javascript?

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

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

How dot notation works in functional component of React.js?

javascript

reactjs

react-functional-component

演示

问题