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

Question

I would like to create and use this component in React with ES6:

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

I've defined a component to handle this structure:

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

}

It's okay to iterate over children and select by type.name while running on the dev server without transpilation:

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

But it does not work after building it (cause of uglify/minify process).

For example, Semantic UI React handles it well - but it uses interfaces and written in TypeScript so I cannot use it as reference.

And one more thing (ah Steve:): I do not want to use npm eject .

Answer 1

This is normally done by allowing the compound components inside them to render their own children and Menu would just render the children it gets, hence maintaining the order.

You might want to share the state of things happening between the Header, Body and Footer, so we add a ContextProvider to the Menu component, so they can all share common state.

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

Another common technique used by Frameworks like Ant.Design is to map over the children and add common props to them (although context would be the better solution in my opinion)