Kinder nummerieren

Question

Ich habe eine Menükomponente, und ich möchte in der Lage sein, die Menüelemente in dieser Komponente zu nummerieren. (Menüpunkt Zahlen werden dann verwendet, um den fokussierte Menüpunkt zu verfolgen und zu reagieren Tastatur Tastenanschläge nummerieren.)

Meine aktuelle Implementierung sieht ungefähr so ​​aus:

class Menu extends React.Component { 
    numberChildren() { 
    return _.chain(React.Children.toArray(this.props.children)) 
     .filter() 
     .map((child, i) => React.cloneElement(child, { 
      number: i + 1 
     })) 
     .value(); 
    } 

    render() { 
    return <div className="menu">{this.numberChildren()}</div>; 
    } 
}; 

ich React.cloneElement bin mit einem number zu injizieren prop, und ich benutze lodash filter, um alle Null Kinder auszuschließen.

Dies reicht Menüs wie das zu handhaben:

<Menu> 
    <MenuItem>Salad</MenuItem> 
    <MenuItem>Grilled Chicken</MenuItem> 
    {!this.props.isOnDiet && <MenuItem>Ice Cream</MenuItem>} 
</Menu> 

vermag jedoch nicht für kompliziertere Kinder:

<Menu> 
    <MenuItem>Salad</MenuItem> 
    <SoupOfTheDayMenuItem/> 
    <MenuItem>Grilled Chicken</MenuItem> 
</Menu> 

SoupOfTheDayMenuItem ein Wrapper-Komponente, die entweder eine einzelne MenuItem zurückgibt (die sollte auch aufgezählt werden) oder null.

Auch wenn SoupOfTheDayMenuItem kehrt null, dann ist es immer noch truthy in der Zeit lodash der filter genannt wird, so wird es nach wie vor die Nummer 2.

Gibt es eine Möglichkeit zu sagen, „diese Eigenschaft nur injiziert für Kinder, die tatsächlich bekommen gemacht“ oder "hol mir die Menge der Kinder, die wirklich etwas gemacht haben"? Oder gibt es eine bessere Möglichkeit, all dies zu entwerfen?

Answer 1

Ich nehme an, SoupOfTheDayMenuItem ist ein Wrapper für MenuItem oder gibt null zurück.
So können Sie versuchen, diejenigen Kinder herauszufiltern, die props.children falsy haben, was bedeuten würde SoupOfTheDayMenuItem zurückgegeben Null.

Dies sollte die Arbeit machen:

numberChildren() { 
    return _.chain(React.Children.toArray(this.props.children)) 
     .filter(child => child.type.displayName == 'MenuItem' || child.props.children) 
     .map((child, i) => React.cloneElement(child, { 
      number: i + 1 
     })) 
     .value(); 
    } 

Answer 2

Ich habe natürlich nicht den gesamten Kontext für Ihre Anwendung, aber vielleicht wäre es sinnvoller, jedes Kind in eine Umhüllung MenuItemContainer Komponente, die die gesamte Indizierung und Sachen behandelt, und dann lassen Sie die untergeordneten Komponenten einfach tun was auch immer ihr Zweck ist. Was ich sage ist etwas wie

class Menu extends React.Component { 
render() { 
    return this.props.children.map((Child, i) => { 
    return (
     <MenuItemContainer key={i}> 
     <Child/> 
     </MenuItemContainer> 
    ) 
    } 
} 

};

Dann Child kann ein MenuItem oder ein SoupOfTheDayMenuItem ohne ein Problem sein.