如何在构建 CRA 应用程序后识别 React 组件标签？

Question

我想在 React 中使用 ES6 创建和使用这个组件：

<Menu>
  <MenuHeader>Hi</MenuHeader>
  <MenuItem>Hello</MenuItem>
  <MenuFooter>End</MenuFooter>
</Menu>

我已经定义了一个组件来处理这个结构：

export class Menu extends React.Component {

  render() {
     return (
     <div ...>
        <div ...>
           {HOW TO SELECT HEADER?}
        </div>
        <div ...>
           {HOW TO SELECT ITEM?}
        </div>
        <div ...>
           {HOW TO SELECT FOOTER?}
        </div>
     </div>
  )}

}

可以通过 type.name 遍历子项和 select 而运行在开发服务器上无需转译：

{ React.Children.map(this.props.children, child =>  { return child.props.type === 'MenuItem' ? <>{ child }</> : '' } ) }

但它在构建后不起作用（uglify/minify过程的原因）。

例如，Semantic UI React 处理得很好 - 但它使用接口并用 TypeScript 编写，所以我不能将其用作参考。

还有一件事 (ah Steve:)：我不想使用npm eject。

Answer 1

这通常是通过允许它们内部的复合组件渲染它们自己的子组件来完成的，而 Menu 只会渲染它获得的 children，从而保持顺序。

您可能想要共享 Header、Body 和 Footer 之间发生的事情的状态，因此我们向 Menu 组件添加了一个 ContextProvider，因此它们都可以共享公共状态。

const rootEl = document.getElementById('root');
const { render } = ReactDOM;
const { createContext } = React;

function MenuHeader({ children }) {
  return (
    <header className="menu-header">
      {children}
    </header>
  )
}

function MenuBody({ children }) {
  return (
    <div className="menu-body">
      {children}
    </div>
  )
}

const MenuContext = createContext();
Menu.Header = MenuHeader;
Menu.Body = MenuBody;

function Menu({ children }) {
  return (
    <MenuContext.Provider value={null}>
      <div className="menu-wrapper">
        {children}
      </div>
    </MenuContext.Provider>
  );
}

function App() {
  return (
    <Menu>
      <Menu.Header>Menu Header</Menu.Header>
      <Menu.Body>Menu Body</Menu.Body>
    </Menu>
  );
}

render(<App />, rootEl);

<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" />

Ant.Design 等框架使用的另一种常用技术是映射子对象并向它们添加常用道具（尽管我认为上下文是更好的解决方案）

如何在构建 CRA 应用程序后识别 React 组件标签？

How to identify React component tags after build in a CRA app?

ecmascript-6

reactjs

webpack

create-react-app