提取特定的孩子來控制他們被呈現的位置是否是反模式？

我正在創建一個可重複使用的ContentHeading控件，它帶有一個可選的菜單和子菜單。菜單和子菜單都有我希望它們渲染的特定位置。事情是，我需要讓這個組件的消費者對任何一個菜單都有足夠的控制，以適應他們的需求。提取特定的孩子來控制他們被呈現的位置是否是反模式？

通常，我只是爲組件創建兩個可選道具，它們可以在Menu中使用，並且可以在需要它們的地方渲染它們（如果它們存在）。這很有效，但至少對我來說，它看起來有點混亂。

所以我想另一種可能是讓他們在他們的標題中放置他們想要的菜單併爲它們指定一個特定的鍵，並且從子項中移除它們並將它們呈現在我想要的位置，並且所有其他子項可以呈現爲標題。

這裏是有問題的代碼：

import * as React from 'react'; 

import { Grid, Menu, Header } from '../'; 

export interface ContentHeaderProps { 
    heading?: string | React.ReactNode; 
} 

export class ContentHeader extends React.Component<ContentHeaderProps> { 
    getComponent(children: React.ReactChild[], key: string) { 
    return children.find((child: any) => { 
     return (child.key && child.key === key); 
    }); 
    } 
    getHeadingComponents(children: React.ReactChild[]) { 
    return children.filter((child: any) => { 
     return !child.key || (child.key !== '.$menu' && child.key !== '.$submenu'); 
    }); 
    } 
    render() { 
    const children = React.Children.toArray(this.props.children); 

    let heading; 

    if (this.props.heading) { 
     heading = this.props.heading; 
    } else { 
     heading = this.getHeadingComponents(children); 
    } 

    const menu = this.getComponent(children, '.$menu'); 
    const submenu = this.getComponent(children, '.$submenu'); 

    return (
     <div className="menu content"> 
     <Grid container padded="vertically"> 
      <Grid.Row> 
      <Header 
       floated="left" 
      > 
       {heading} 
      </Header> 
      {menu} 
      </Grid.Row> 
     </Grid> 
     {submenu} 
     </div> 
    ); 
    } 
}

這裏，它是在使用中：

<ContentHeader> 
    <Menu key="menu"> 
    <Menu.Item>Test Menu</Menu.Item> 
    </Menu> 
    <Menu key="submenu"> 
    <Menu.Item>Test Submenu</Menu.Item> 
    </Menu> 
    Welcome! 
</ContentHeader>

它的工作原理，但我不知道這是一個反模式。我認爲問題在於組件的功能是不透明的。

來源

2017-09-03 HackedByChinese

這並不壞，最終這將是所有的意見和選擇的問題。如果它適合你，並且你覺得它可以維護，那很好。

但是，如果我要提供一些指導，我會做的就是讓這些都是屬性，然後在那裏使用ContentHeader組件，我會創建函數來返回項目或將它們存儲在變量之前使用並參考變量。

<ContentHeader menu={this.createMenu()} subMenu={this.createSubMenu()}> 
</ContentHeader>

另一種選擇是，您可以創建子項，因爲自己的反應組件和組件類型傳遞的值的屬性，然後使用該組件類型，以項目列表一道，通過在列表上映射並創建組件來創建內部組件。

所有這些的主要價值是提高測試能力和減少維護開銷。

來源

2017-09-04 00:36:08

提取特定的孩子來控制他們被呈現的位置是否是反模式？

回答

相關問題