Reagieren zwingen re-mount-Komponente auf der route ändern

Wie kann ich Sie wieder montieren einer Komponente auf der route ändern, wenn mit der gleichen Komponente für beide Strecken?

Hier ist mein code.

Routen.jsx

<Router history={browserHistory}>
  <Route path="/" component={Home} />
  <Route path="/foo/:fooId" component={Home} />
</Router>

Habe ich eine bedingte check-in Home Komponente für fooId, was macht der JSX entsprechend.

<Link to="/foo/1234">fooKey</Link>

In dem moment, wenn angeklickt fooKey wechselt die route und die render-Funktion im Home-Komponente wird erneut ausgelöst, ist aber nicht wieder montiert.

Ging ich durch die anderen Antworten erwähnt componentWillReceiveProps, aber ich habe eine Menge von config in die constructor und ich möchte nicht, sich zu bewegen alle, die config zu componentWillReceiveProps.

Bitte Kommentar, wenn weitere Informationen benötigt werden.

  • Zwingt ein unmounten ist ein anti-Muster in Reagieren. componentWillReceiveProps ist der richtige Weg, dies zu tun und Ihr code wird dann mit dem übereinstimmen, was andere Leser/Beitragende erwarten würde.
  • Vereinbart, es ist kein guter Weg, dies zu tun, und Sie sollten nicht brauchen, auch wenn es war. Wenn es die Konfiguration oder die Daten im Konstruktor werden muss, veränderlich nach der Instanziierung, dann sollte es verschoben werden aus dem Konstruktor und in state.
  • Vielen Dank für die Anregungen. Es wird hilfreich sein, wenn Sie können zeigen Sie mir mehr Erklärung auf die Komponente sollte nicht wieder aufgesetzt werden. Es ist offensichtlich, dass hierbei die beste Lösung, aber gibt es irgendeinen anderen Grund?
  • Ich meine, es geht einfach komplett gegen wie Reagieren die Komponente Lebenszyklus verwendet werden soll. Es ist ein bisschen wie zu Fragen, "Warum sollte ich nicht mit einem Schraubenzieher statt einem hammer zu hämmern dieser Nagel? Es ist offensichtlich, dass es degradiert die perf aber gibt es irgendeinen anderen Grund?" 😛
  • Harte Analogie, muss ich sagen! Allerdings bin ich noch nicht überzeugt, dass es gegen die Nutzung Reagieren Komponente Lebenszyklus. Re-Montage wäre einfach wiederholen Sie den Prozess der Montage von Grund auf, was natürlich eine Verschwendung und ich Stimmen in diesem Punkt.
  • Das ist so "gegen den Strich", wenn es darum geht zu Reagieren, ich glaube nicht, dass es sich lohnt, Zeit zu überlegen.

InformationsquelleAutor Venkatesh SGS | 2017-07-26
  1. 4

    Wenn Sie brauchen, um zu erzwingen, die Montage einer Komponente auf jeder routing-Spiel, das Sie erzielen könnte, die es durch die Schlüssel Eigentum, es sei denn, Sie wissen, was Sie tun:

    <Route
  exact
  path={'some path'}
  render={props => <RemountAlways key={Date.now()} {...props} />}
/>

    key={Date.now()} diese wichtige Eigenschaft wird Kraft reagieren zu montieren jeder Zeit.

    Hinweis: componentWillReceiveProps ist eine schlechte Nachricht in reagieren.

    InformationsquelleAutor Lefi Tarik
  2. 3

    So, du bist nicht gehen zu wollen, um un-mount und re-mount die Komponente jedes mal, wenn Sie Ihre Abfrage-string ändert. Ändern Sie Ihre Routen auf dieser:

    <Router history={browserHistory}>
  <Route path="/" component={Home} />
</Router>

    Wickeln Sie Ihre <Home /> Komponente mit der withRouter - HoC-zur Verfügung gestellt von Router Reagieren. Sobald Sie das getan haben, ({ match, history, location }) verfügbar sein wird in der <Home /> Komponente. In Ihrem componentWillRecieveProps lifecycle-Haken, die Sie ausführen können, jeder Logik erfordert, dass query-strings auf props.location.search auf die Ergebnisse, die Sie wünschen.

    InformationsquelleAutor Kyle Richardson
  3. -1

    Offenbar machst du etwas falsch, wenn Sie brauchen, um zu erzwingen, re-mounten. Im Allgemeinen sollten Sie reagieren auf componentWillReceiveProps:

    class DumbComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = this.propsToState(this.props);
  }

  componentWillReceiveProps(nextProps) {
    this.setState(this.propsToState(nextProps));
  }

  propsToState(props) {
    //place all of your state initialization dependent logic here
    return {
      foo: props.foo,
    };
  }

  render() {
    return <div>{this.state.foo}</div>
  }
}
    • Dies ist nicht die Art und Weise zu behandeln, Requisiten und Staat. Sie möchten eine single source of truth " für jedes Stück von Daten. Wenn Sie eine Kombination von staatlichen und Requisiten für Ihre Darstellung können Sie ausführen, dass die Logik in der Zeit der not.
    InformationsquelleAutor Eugene Tsakh
Schreibe einen Kommentar