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

【问题标题】：How to identify React component tags after build in a CRA app?构建 CRA 应用程序后如何识别 React 组件标签？
【发布时间】：2020-07-31 09:33:32
【问题描述】：

我想在 React with 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 选择：

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

但它在构建后不起作用（由于 uglify/minify 过程）。

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

还有一件事（啊，史蒂夫：）：我确实不想使用npm eject。

【问题讨论】：

标签： reactjs webpack ecmascript-6 create-react-app

【解决方案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 这样的框架使用的另一种常用技术是映射子元素并向它们添加常用道具（尽管我认为上下文是更好的解决方案）

【讨论】：

哇，太好了，我会测试它，我会回来的