javascript - 如何让多个提供者或状态仅可用于布局的一部分

Question

我关注了React-Router Modal教程有一些看起来像 2 个 DOM 的东西(一个用于当前位置的模态，一个用于先前位置的默认值)。

问题:我需要能够将所有组件传递到模态中一个新的 Prop isModal=true 但我不想为每个组件传递它子组件和子组件。

我的解决方案??: 使用 React-Redux 仅为 Modal 页面传递 isModal 属性。 (更新:看起来 Redux 不可能，我有其他解决方案吗)

我从Redux-Provider知道我只能拥有一个商店，但我可以处理多个 Provider 并为不同的组件存储子项吗？

index.js

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

App.js

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
  ];
}

但是在 Modal 的页面上，在 mapStateToProps 上，state.isModal 从未定义:/

Answer 1

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

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

了解更多 here如果您愿意，您可以如何使用它并用它实现 redux 风格的应用程序。

这是一本好书，但是停下来......!!!!!!!!

我也不会用它来做你想做的事。实际上，您的 url 是(应该)是全局状态，它应该包含您有时需要显示的所有内容，这意味着重构您的 url 和页面的结构。在此示例中，它们通过状态变量传递模型 true，我尝试避免通过 url 链接调用传递状态，因为如果用户随后刷新该 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;

这是更简单的方法。这里的关键是在 Route 路径中使用变量。

当我们访问 /gallery 时，我们满足 Gallery 路径，正如我们所说，:type 和 :id 对于该 View 是可选的。

因此，当我们添加 /gallery/img/0 时，我们说这是一个模型，因为我们想将其放置在画廊上，因此我们将画廊和模态组件一起显示。

但是当我们转到/featured/img/0时，它只会满足ImageView

<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} />