Question

我想在各种兄弟组件之间传递状态：Dashboard和包含/overall的所有路由。我的想法是，我可以点击URL中包含/overall的任何页面上的按钮，它会获得相应的值并将该值移动到仪表板。我一直在阅读这个主题，但是我很难理解哪个是最适合我的目的。

index.js

import React from "react";
import { render } from "react-dom";
import Router from "./components/Router";
import registerServiceWorker from "./registerServiceWorker";
import "./css/style.css";
render(<Router />, document.getElementById("main"));
registerServiceWorker();

Router.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import NameSelector from "./NameSelector";
import Dashboard from "./Dashboard";
import OverallGoals from "./OverallGoals";
import OverallShots from "./OverallShots";
import OverallPossession from "./OverallPossession";
import OverallResults from "./OverallResults";
import OverallFormations from "./OverallFormations";
const Router = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={NameSelector} />
      <Route exact path="/:gamerId/dashboard" component={Dashboard} />
      <Route exact path="/:gamerId/overall/goals" component={OverallGoals} />
      <Route exact path="/:gamerId/overall/shots" component={OverallShots} />
      <Route
        exact
        path="/:gamerId/overall/results"
        component={OverallResults}
      />
      <Route
        exact
        path="/:gamerId/overall/possession"
        component={OverallPossession}
      />
      <Route
        exact
        path="/:gamerId/overall/formations"
        component={OverallFormations}
      />
      <Route component={NotFound} />
    </Switch>
  </BrowserRouter>
);

export default Router;

根据我的理解，将状态传递给Route并不会像Route一样工作，但实际上并没有呈现任何内容。我需要一个父组件来保持兄弟姐妹的状态，但是将一个组件专门用于管理两个组件之间的状态是没有意义的（或者它会是什么？）。

最佳做法是什么以及它如何适合我的代码库？

另外，我现在想避免使用Redux，因为当我在纯React中实现这个解决方案时，我会更加欣赏这项技术。

React相当新，我理解这段代码可能稍微有点效率。

编辑：NameSelector是一个包含输入字段的组件，该字段曾提交push() es到包含输入的网址

此致詹姆斯。

Answer 1

我需要一个父组件来保存兄弟姐妹的状态，但是将组件仅用于管理两个组件之间的状态是没有意义的（或者是吗？）。

确实如此！

实际上，如果不使用Redux或React Context API，您将需要一个公共父组件来保存，共享和管理您希望两个兄弟组件共享的状态的更新。

如果你的组件树很简单，并且兄弟组件非常接近（即你不需要将状态上下传递多层），那么这种配置很有意义。拥有一个管理状态的父组件，渲染它下面的两个兄弟。

如果树结构复杂（或将变得复杂），组件和子组件在多个层之间相互分离，那么就开始考虑并投资Redux存储。

在兄弟组件之间传递状态React Router v4

1 个答案: