Javascript 如何使多个提供程序或状态仅对布局的一部分可用

我按照教程制作了类似于2个DOM的东西（一个用于当前位置的模态，另一个用于先前位置的默认模态）

问题：我需要能够将所有组件传递到模态中一个新的道具

isModal=true

，但我不想将它传递给每个子组件和子组件

我的解决方案：使用React-Redux仅为Modal的页面传递iModal道具。（更新：看起来使用Redux是不可能的，我有其他解决方案吗）

从中我知道我只能有一个存储，但是我可以为不同的组件处理多个提供程序和存储子级吗

index.js

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

render() {
  return [
    <Layout key="document-layout" {...this.props}>
      <Page {...{ ...this.props, location: isModal ? previousLocation : location}} />
    </Layout>,
    isModal
    ? <ModalLayout key="modal-layout">
        <Provider store={{...store, isModal:true}}>
          <Page {...this.props} />
        </Provider>
      </ModalLayout>
    : null
  ];
}

ReactDOM.render(
,
document.getElementById（'root'））
);

App.js

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

render() {
  return [
    <Layout key="document-layout" {...this.props}>
      <Page {...{ ...this.props, location: isModal ? previousLocation : location}} />
    </Layout>,
    isModal
    ? <ModalLayout key="modal-layout">
        <Provider store={{...store, isModal:true}}>
          <Page {...this.props} />
        </Provider>
      </ModalLayout>
    : null
  ];
}

render（）{
返回[
,
伊斯莫达尔
? 
：null
];
}

---

但是在Modal的页面上，在

mapstatetops

state.isModal从未定义：/

因此，如果您想使用一些全局类型状态，那么我将在最新的react中使用新上下文，如下所示

...
React.useContext(SomeContext)
...

阅读更多你可以如何使用它，并实现一个redux风格的应用程序，如果你喜欢的话

这本书读得很好，但是停下来

我也不会用它来做你想做的事。 实际上，您的url是（应该）全局状态，它应该包含您需要显示的所有内容，有时这意味着重构url和页面的结构。 在本例中，他们通过状态变量传递模型true，我试图避免通过url链接调用传递状态，因为如果用户刷新该url上的页面，状态将丢失，在本例中，执行此操作时存在明显的错误。因此，这就是我如何实现同样的事情，但使用的网址为王

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

class ModalSwitch extends Component {

  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/gallery/:type?/:id?" component={Gallery} />
          <Route path="/featured/img/:id" component={ImageView} />
        </Switch>
        <Route path="/gallery/img/:id" component={Modal} />
      </div>
    );
  }
}

const IMAGES = [
  { id: 0, title: "Dark Orchid", color: "DarkOrchid" },
  { id: 1, title: "Lime Green", color: "LimeGreen" },
  { id: 2, title: "Tomato", color: "Tomato" },
  { id: 3, title: "Seven Ate Nine", color: "#789" },
  { id: 4, title: "Crimson", color: "Crimson" }
];

function Thumbnail({ color }) {
  return (
    <div
      style={{
        width: 50,
        height: 50,
        background: color
      }}
    />
  );
}

function Image({ color }) {
  return (
    <div
      style={{
        width: "100%",
        height: 400,
        background: color
      }}
    />
  );
}

function Home() {
  return (
    <div>
      <Link to="/gallery">Visit the Gallery</Link>
      <h2>Featured Images</h2>
      <ul>
        <li>
          <Link to="/featured/img/2">Tomato</Link>
        </li>
        <li>
          <Link to="/featured/img/4">Crimson</Link>
        </li>
      </ul>
    </div>
  );
}

function Gallery() {
  return (
    <div>
      {IMAGES.map(i => (
        <Link
          key={i.id}
          to={{
            pathname: `/gallery/img/${i.id}`
          }}
        >
          <Thumbnail color={i.color} />
          <p>{i.title}</p>
        </Link>
      ))}
    </div>
  );
}

function ImageView({ match }) {
  let image = IMAGES[parseInt(match.params.id, 10)];

  if (!image) return <div>Image not found</div>;

  return (
    <div>
      <h1>{image.title}</h1>
      <Image color={image.color} />
    </div>
  );
}

function Modal({ match, history }) {
  let image = IMAGES[parseInt(match.params.id, 10)];

  if (!image) return null;

  let back = e => {
    e.stopPropagation();
    history.goBack();
  };

  return (
    <div
      onClick={back}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        background: "rgba(0, 0, 0, 0.15)"
      }}
    >
      <div
        className="modal"
        style={{
          position: "absolute",
          background: "#fff",
          top: 25,
          left: "10%",
          right: "10%",
          padding: 15,
          border: "2px solid #444"
        }}
      >
        <h1>{image.title}</h1>
        <Image color={image.color} />
        <button type="button" onClick={back}>
          Close
        </button>
      </div>
    </div>
  );
}

function ModalGallery() {
  return (
    <Router>
      <Route component={ModalSwitch} />
    </Router>
  );
}

export default ModalGallery;

---

所以，如果你想使用一些全局类型状态，那么我会在最新的react中使用新的上下文，就像这样

...
React.useContext(SomeContext)
...

阅读更多你可以如何使用它，并实现一个redux风格的应用程序，如果你喜欢的话

这本书读得很好，但是停下来

我也不会用它来做你想做的事。 实际上，您的url是（应该）全局状态，它应该包含您需要显示的所有内容，有时这意味着重构url和页面的结构。 在本例中，他们通过状态变量传递模型true，我试图避免通过url链接调用传递状态，因为如果用户刷新该url上的页面，状态将丢失，在本例中，执行此操作时存在明显的错误。因此，这就是我如何实现同样的事情，但使用的网址为王

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

class ModalSwitch extends Component {

  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/gallery/:type?/:id?" component={Gallery} />
          <Route path="/featured/img/:id" component={ImageView} />
        </Switch>
        <Route path="/gallery/img/:id" component={Modal} />
      </div>
    );
  }
}

const IMAGES = [
  { id: 0, title: "Dark Orchid", color: "DarkOrchid" },
  { id: 1, title: "Lime Green", color: "LimeGreen" },
  { id: 2, title: "Tomato", color: "Tomato" },
  { id: 3, title: "Seven Ate Nine", color: "#789" },
  { id: 4, title: "Crimson", color: "Crimson" }
];

function Thumbnail({ color }) {
  return (
    <div
      style={{
        width: 50,
        height: 50,
        background: color
      }}
    />
  );
}

function Image({ color }) {
  return (
    <div
      style={{
        width: "100%",
        height: 400,
        background: color
      }}
    />
  );
}

function Home() {
  return (
    <div>
      <Link to="/gallery">Visit the Gallery</Link>
      <h2>Featured Images</h2>
      <ul>
        <li>
          <Link to="/featured/img/2">Tomato</Link>
        </li>
        <li>
          <Link to="/featured/img/4">Crimson</Link>
        </li>
      </ul>
    </div>
  );
}

function Gallery() {
  return (
    <div>
      {IMAGES.map(i => (
        <Link
          key={i.id}
          to={{
            pathname: `/gallery/img/${i.id}`
          }}
        >
          <Thumbnail color={i.color} />
          <p>{i.title}</p>
        </Link>
      ))}
    </div>
  );
}

function ImageView({ match }) {
  let image = IMAGES[parseInt(match.params.id, 10)];

  if (!image) return <div>Image not found</div>;

  return (
    <div>
      <h1>{image.title}</h1>
      <Image color={image.color} />
    </div>
  );
}

function Modal({ match, history }) {
  let image = IMAGES[parseInt(match.params.id, 10)];

  if (!image) return null;

  let back = e => {
    e.stopPropagation();
    history.goBack();
  };

  return (
    <div
      onClick={back}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        background: "rgba(0, 0, 0, 0.15)"
      }}
    >
      <div
        className="modal"
        style={{
          position: "absolute",
          background: "#fff",
          top: 25,
          left: "10%",
          right: "10%",
          padding: 15,
          border: "2px solid #444"
        }}
      >
        <h1>{image.title}</h1>
        <Image color={image.color} />
        <button type="button" onClick={back}>
          Close
        </button>
      </div>
    </div>
  );
}

function ModalGallery() {
  return (
    <Router>
      <Route component={ModalSwitch} />
    </Router>
  );
}

export default ModalGallery;

---

我刚刚看到

store

包含一个Redux对象（带有dispatch、getState等），而不是

connect（）函数上可用的最终
state
。。所以我的代码不能这样工作。我有解决方案吗？我刚刚看到
store
包含一个Redux对象（带有dispatch、getState等），而不是
connect（）函数上可用的最终
state
。。所以我的代码不能这样工作。我有解决的办法吗？我理解你的观点，但你没有回答我的问题，你只是删除了这一点。我知道“url”应该与当前状态相关。但像Fb画廊一样，我希望能够区分“在模式上询问”和“新url页面”。示例：我在home上
/
，我想在modal上显示
/login
。我将像前面一样在后台显示
/
，并将
/login
作为当前模式显示到模式中。如果用户刷新
/login
现在是最新的（并且不需要作为模式），那么直接在默认布局上显示为当前url。或者官方的React路由器示例是错误的？因为这就是他们正在做的事：/还请注意，每个url都必须在模式和默认布局上工作，因此使用您的解决方案，我必须将所有路由加倍。好的，但redux仍然不是解决该问题的好方法，因为您发现在提供程序中不能有提供程序。你可以有很多反应上下文，所以在这种情况下，这可能是正确的解决方案。我理解你的观点，但你没有回答我的问题，只是删除了这一点。我知道“url”应该与当前状态相关。但像Fb画廊一样，我希望能够区分“在模式上询问”和“新url页面”。示例：我在home上
/
，我想在modal上显示
/login
。我将像前面一样在后台显示
/
，并将
/login
作为当前模式显示到模式中。如果用户刷新
/login
现在是最新的（并且不需要作为模式），那么直接在默认布局上显示为当前url。或者官方的React路由器示例是错误的？因为这就是他们正在做的事：/还请注意，每个url都必须在模式和默认布局上工作，因此使用您的解决方案，我必须将所有路由加倍。好的，但redux仍然不是解决该问题的好方法，因为您发现在提供程序中不能有提供程序。您可以有许多react上下文，因此在这种情况下，这可能是正确的解决方案。