Reagieren - Entfernen Sie Prop von Kind

Question

Ich muss eine Stütze von einem Kind entfernen.

Ich habe ein Container-Element, das eine Eigenschaft auf seine Kinder verwendet, um einige Verbesserungen an den Kindern durchzuführen. Diese Eigenschaft sollte vor dem Rendern aus dem Kind entfernt werden.

Die asyncHandler-Eigenschaft sollte vor dem Rendern aus der Schaltfläche entfernt werden.

AsyncContainer verwendet React.cloneElement(child, properties).

Ich habe versucht, die asyncHandler-Eigenschaft auf Null zu setzen, sie auf undefined festzulegen und die Eigenschaft aus dem child.props zu löschen. Es scheint, dass es unmöglich ist, diese Eigenschaft wieder los zu werden.

Answer 1

Laut den Kommentaren können Sie die Requisiten nicht direkt ändern, da sie unveränderlich sind.

Allerdings denke ich, ich habe eine einfache Lösung für dieses Problem. Ich habe keine Ahnung, welche Bibliothek das ist oder wie es funktioniert, also dies kann oder kann nicht funktionieren. Dies ist jedoch eine allgemeine Antwort darauf, wie Sie eine Requisite entfernen, bevor eine Komponente bereitgestellt wird.

Davon abgesehen, würde ich versuchen, meine eigene Komponente zu schaffen, die eine macht <Button />:

class MyButtonComponent extends React.Component { 

... 

    render() { 
    return <Button onClick={this.props.onClickHandler} />; 
    } 
} 

Dann in der Komponente, die Sie Ihre Erweiterungen zu tun:

render() { 
    <AsyncContainer> 
    <MyButtonComponent onClickHandler={this.asyncStuff} asyncHandler="onClick"/> 
    </AsyncContainer> 
} 

diese Weise können Sie pflegen Ihr onClick Eventlistener auf der <Button /> Komponente, aber Sie nicht die illegale asyncHandler Requisite passieren.

---

Edit:

Alternativ können Sie auch tun:

class MyButtonComponent extends React.Component { 

... 

    componentWillMount() { 
    let newProps = this.props; 
    delete newProps.asyncHandler; 
    this.setState({properties: newProps}): 
    } 

    render() { 
    return <Button {...this.state.properties} />; 
    } 
} 

Diese alle Requisiten gelten (mit spread operator) zu <Button /> Ausnahme asyncHandler, die wir vor löschen zu Die Komponente wird montiert, indem eine Kopie der props in state aber mit asyncHandler erstellt wird.

Überprüfen Sie auch this answer Ich gab eine ähnliche Frage.

Answer 2

Ich lief gerade in dieses Problem. Sie können einfach ein neues Element erstellen und den Typ und die Requisiten des alten Elements verwenden, die Sie übergeben möchten. Ich bin mir nicht sicher, ob dies ein Anti-Muster ist oder nicht, ich bin einfach darüber gestolpert und es scheint soweit zu funktionieren.

Es soll wie folgt aussehen:

function AsyncContainer(props) { 
    const child = React.Children.only(props.children) 
    const { asyncHandler, ...childProps } = child.props 
    // do asyncHandler stuff 
    return React.createElement(child.type, childProps) 
}