Reagieren Die Bestückung Zweimal
Innen einen kleinen Teil meiner Reagieren/Redux/ReactRouterV4 Anwendung, ich habe folgende Komponente Hierarchie,
- Exhibit (Parent)
-- ExhibitOne
-- ExhibitTwo
-- ExhibitThree
Innerhalb der Kinder Zeigen, es gibt über 6 verschiedene mögliche Routen, die gerendert werden kann als gut. Keine Sorge, ich werde erklären, mit dem code.
Hier ist meinen Eltern zu Zeigen Komponente:
export class Exhibit extends Component {
render() {
const { match, backgroundImage } = this.props
return (
<div className="exhibit">
<Header />
<SecondaryHeader />
<div className="journey"
style={{
color: 'white',
backgroundImage: `url(${backgroundImage})`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center-center'
}}>
<Switch>
<Route path={`${match.url}/exhibit-one`} component={ExhibitOne} />
<Route path={`${match.url}/exhibit-two`} component={ExhibitTwo} />
<Route path={`${match.url}/exhibit-three`} component={ExhibitThree} />
<Redirect to="/" />
</Switch>
</div>
</div>
)
}
}
Grundsätzlich alle seine macht, für seine Arbeit ist die Darstellung eines der Exponate Unterkomponenten, und legen Sie ein Hintergrundbild.
Hier ist einer der Unterkomponenten, ExhibitOne:
export default class ExhibitOne extends Component {
constructor(props) {
super(props)
}
render() {
const { match } = this.props
return (
<div className="exhibit-one">
<Switch>
<Route path={`${match.url}/wall-one`} component={ExhibitHOC(WallOne)} />
<Route path={`${match.url}/wall-two`} component={ExhibitHOC(WallTwo)} />
<Route path={`${match.url}/wall-three`} component={ExhibitHOC(WallThree)} />
<Route path={`${match.url}/wall-four`} component={ExhibitHOC(WallFour)} />
<Route path={`${match.url}/wall-five`} component={ExhibitHOC(WallFive)} />
<Route path={`${match.url}/wall-six`} component={ExhibitHOC(WallSix)} />
</Switch>
</div>
)
}
}
Um zu schneiden nach unten auf die Eingabe, habe ich beschlossen, wickeln Sie die Komponenten in eine Höhere Ordnung, die Komponente, deren
Zweck ist die Versendung einer Aktion, die richtige Hintergrundbild für die top-level Aufweisen übergeordneten Komponente.
Dies ist die übergeordnete Komponente:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions/wall-background-image'
export default function(ComposedComponent) {
class ExhibitHoc extends Component {
componentDidMount = () => this.props.setBackgroundImage(`./img/exhibit-one/${this.getWall()}/bg.jpg`)
getWall = () => {
//this part isnt important. it is a function that determines what wall I am on, in order to set
//the proper image.
}
render() {
return <ComposedComponent />
}
}
return connect(null, actions)(ExhibitHoc);
}
Beim erstmaligen laden der ExhibitOne, ich kann sehen, dass die setBackgroundImage Aktion Ersteller führt zweimal durch auf der Suche
bei Redux-Logger in der Konsole. Meine erste Neigung, die Verwendung componentDidMount war, weil ich dachte, es zu benutzen
begrenzen würde die Aktion creator nur einmal ausführen. Hier ist ein screenshot von der log:
Ich glaube, ich könnte Missverständnisse, wie Höhere Ordnung, die mit Komponenten arbeiten, oder vielleicht irgendeine Art von Reagieren Router V4 Ding?
Wie auch immer, jede Hilfe wäre sehr geschätzt werden, warum dies geschieht zweimal.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist, dass die
component
prop hier ist eine Funktion, die Anwendung, das ergibt eine neue Klasse auf jeden machen. Dadurch wird die Vorherige Komponente zu deaktivieren und die neue zu montieren (siehe die docs für reagieren-router für weitere Informationen). Normalerweise würden Sie verwendenrender
prop um dies zu umgehen, aber das funktioniert nicht mit höherwertigen Komponenten, wie jede Komponente, die erstellt wird, mit ein-HOC-Anwendung beim Rendern erhalten erneut während Reagieren die Versöhnung sowieso.Ist eine einfache Lösung zum erstellen Ihrer Komponenten außerhalb der
ExhibitOne
Klasse, z.B.:Alternativ, je nachdem, was der wrapper nicht, es könnte möglich sein, deklarieren Sie es wie eine normale Komponente, die macht
{this.props.children}
anstelle des Parameters<ComposedComponent/>
, und wickeln Sie die Komponenten in jederRoute
:Beachten Sie, dass Sie müssen verwenden Sie
render
stattcomponent
um zu verhindern, dass wieder aufstecken. Wenn die Komponenten nicht verwenden routing-Requisiten, Sie könnten sogar entfernen{...props}
.