Wie fügt man einem bestimmten Element eine Stütze hinzu, indem man das Element in React klont?

Question

Ich versuche, einer bestimmten React-Komponente eine Stütze hinzuzufügen, nicht allen untergeordneten Elementen der Komponente.

Die Funktion, die die Stütze sieht aus wie der folgenden Code hinzu:

addProps (children) { 
const childProps = { doSomething: this.doSomething }; 

const recursiveAddProps = (children) => { 
    return React.Children.map(children, child => { 
    if (child.type !== GrandChild){ 
     if (child.props) recursiveAddProps(child.props.children); 
     return child; 
    } 
    return React.cloneElement(child, childProps); 
    }); 
} 
return recursiveAddProps(children); 
} 

Example

Aber das ist nicht das Hinzufügen der Funktion doSomething zu den Enkeln Komponente, so dass kein OnClick-Ereignis wird ausgelöst, wenn die Komponente ist angeklickt.

Was würden Sie tun? Danke für Ihre Hilfe!

Answer 1

Sie klonen nicht die untergeordneten Zwischenelemente und ignorieren den Rückgabewert von recursiveAddProps. cloneElement mutiert nicht, also müssen Sie es so machen (ungetestet):

const recursiveAddProps = (children) => { 
    return React.Children.map(children, child => { 
    if (child.type !== GrandChild) { 
     if (child.props) return React.cloneElement(child, { 
      children: recursiveAddProps(child.props.children), 
     }); 
     return child; 
    } 
    return React.cloneElement(child, childProps); 
    }); 
}