Wie Requisiten an Komponenten übergeben werden, wenn Sie das Attribut <Route components = {}> verwenden?

Also, die <Route> Komponente von react-router hat components Attribut (docs):Wie Requisiten an Komponenten übergeben werden, wenn Sie das Attribut <Route components = {}> verwenden?

<Route path="latest" components={{sidebar: Sidebar, content: ContentLayout}} />

dann in einem geeigneten Komponente kann ich diese Komponenten durch Komponente Requisiten nennen:

render() { 
    <div> 
     {this.props.sidebar} 
     {this.props.content} 
    <div> 
}

jedoch ohne react-router ich tun würde, dies überlasse ich meine Komponente benutzerdefinierte Requisiten:

render() { 
    <div> 
     <Sidebar names={ ['foo', 'bar'] } isOpen={true} num={10} /> 
     <ContentLayout type={ contentType } background={'#fff'} title={titleOne} /> 
    <div> 
}

Meine Fragen sind. Wie kann ich Requisiten an meine Komponente weitergeben, wenn ich components Attribut von React Router <Route> Komponente verwende?

Der beste Weg, etwas so sein würde:

render() { 
    <div> 
     {<this.props.sidebar names={ ['foo', 'bar'] } isOpen={true} />} 
     {<this.props.content type={ contentType } background={'#fff'} />} 
    <div> 
}

Quelle

2016-10-27 Green

Wie Horia sagte Klonen kann eine Lösung sein, auch es kann andere Lösungen auch, aber im Allgemeinen sieht dieser Ansatz hackish für mich, warum müssen Sie Requisiten dort an erster Stelle? Wenn Sie State-Container wie Redux verwenden, übergeben Sie Requisiten nur aus einer Container-Komponente. Oder wohin die Requisiten kommen, von denen du kommst? – Shota

@Shota, Willst du 'connect()' Methode von 'Redux' verwenden, um Requisiten aus einem Container zu übergeben? Ich mache es jetzt. Aber ich möchte die Verwendung von 'connect()' eliminieren. Deshalb möchte ich Requisiten manuell übergeben – Green

Die Sache ist, dass es auch auf eine Art von Requisiten ankommt. Wenn deine Requisiten, die du von Ajax kommend versuchst zu geben, sollten sie von redux kommen. Wenn sie einige Standardoptionen für Ihre Komponenten sind (wie ich in Ihrem Code sehe: isOpen = {true}, #fff) wäre der richtige Platz für sie in der Konstanten-Datei, also warum Sie sie nicht in eine Konstanten-Datei und dann importieren Sie sie in Komponenten wo immer Sie brauchen? – Shota

Eine Lösung hierfür ist, zu clone den Komponenten und neue Requisiten für sie im Klonprozess angeben. So etwas wie:

render() { 
    return (<div> 
    {React.cloneElement(this.props.sidebar, props={names: ['foo', 'bar'], isOpen: true})} 
    {React.cloneElement(this.props.content, props={type:contentType, background: '#fff'})} 
    </div>); 
}

Quelle

2016-10-27 06:57:54

Wie Requisiten an Komponenten übergeben werden, wenn Sie das Attribut <Route components = {}> verwenden?

Antwort

Verwandte Themen