React-router-modal 奇怪的行为 - 我需要点击两次才能返回，应该只有一次

Question

我使用了这个 npm 包 => react-router-modal( doc )

这里 (click) 在该示例中，只需单击一下即可从模式返回，但在我的情况下，我必须单击鼠标两次好几次回去了，不知道为什么...

也许这里有人可以帮我回答这个问题。

该问题的快速演示 -> https://youtu.be/szRC_K10pyA

完整项目代码 -> github

下面两个最重要的组成部分：

组件BeerListItem

import React, { Component } from 'react';
import Card, { CardContent } from 'material-ui/Card';
import { ModalContainer, ModalRoute } from 'react-router-modal';
import { BrowserRouter, Link } from 'react-router-dom';
import 'react-router-modal/css/react-router-modal.css';
import './style.css';

import BeerProfile from '../BeerProfile';

class BeerListItem extends Component {
  constructor(props) {
    super(props);

    this.beerProfile = this.beerProfile.bind(this);
  }

  beerProfile() {
    const { beer } = this.props;
    return (
      <div>
        <BeerProfile beer={beer} />
      </div>
    );
  }

  render() {
    const { beer } = this.props;
    let cutStr = '';

    if (beer.name.length >= 27) {
      cutStr = `${beer.name.slice(0, 26)}...`;
    } else {
      cutStr = beer.name;
    }

    return (
      <BrowserRouter>
        <div>
          <Link to={`/details/${beer.id}`}>
            <Card raised className="BeerListItem-main-card">
              <CardContent>
                <img
                  src={beer.image_url}
                  alt="beer"
                  className="BeerListItem-img"
                />
                <div className="BeerListItem-h2-and-p-container">
                  <h2 className="BeerListItem-h2">{cutStr}</h2>
                  <p className="BeerListItem-p">{beer.tagline}</p>
                </div>
              </CardContent>
            </Card>
          </Link>

          <ModalRoute
            className="test-modal test-modal-foo"
            path={`/details/${beer.id}`}
            parentPath="/"
            component={this.beerProfile}
          />

          <ModalContainer />
        </div>
      </BrowserRouter>
    );
  }
}

export default BeerListItem;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

组件BeerProfile

import React, { Component } from 'react';
import { Modal } from 'react-router-modal';
import 'react-router-modal/css/react-router-modal.css';
import './style.css';

class BeerProfile extends Component {
  constructor(props) {
    super(props);

    this.state = {
      show: true,
    };
    this.handleBackClick = this.handleBackClick.bind(this);
  }

  handleBackClick() {
    this.setState({ show: false });
  }

  render() {
    console.log(this.props);

    const { id } = this.props.beer;
    return (
      <div>
        {this.state.show && (
          <Modal onBackdropClick={this.handleBackClick}>
            <h3>Child elements</h3>
            <p>{id}</p>
          </Modal>
        )}
      </div>
    );
  }
}

export default BeerProfile;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

我想我明白了。

所以当你的模式被渲染时，这是我得到的控制台日志，

所以基本上，安装是两次而不是一次。

当我检查代码库时，我看到在 BeerListItem 内部，您使用了包中的 ModalRoute 组件。

 <ModalRoute
   className="test-modal test-modal-foo"
   path={`/details/${beer.id}`}
   parentPath="/"
   component={this.beerProfile}
 />

并且this.beerProfile呈现以下内容

{this.state.show && (
  <Modal onBackdropClick={this.handleBackClick}>
    <h3>Child elements</h3>
    <p>{id}</p>
  </Modal>

Modal 也是来自包本身

来自文档 => ModalRoute

ModalRoute A react-router Route that shows a modal when the location pathname matches.

=> Modal

Modal Renders its contents in a modal div with a backdrop. Use Modal if you want to show a modal without changing the route.

所以基本上这是一个非此即彼的情况。如果你想要一个带有变化 url 的模式，你应该使用 ModalRoute。如果你只想要模式，你应该使用 Modal。

据我了解，当您将 component 属性传递给 ModalRoute 时，它会自动用 Modal

包装这些组件

所以你需要做的是，替换

<div>
  {this.state.show && (
    <Modal onBackdropClick={this.handleBackClick}>
      <h3>Child elements</h3>
      <p>{id}</p>
     </Modal>
   )}
 </div>

和

  <div>
    <h3>Child elements</h3>
    <p>{id}</p>
  </div>

啊还有一件小事，你也需要摆脱掉className

<ModalRoute
            className="test-modal test-modal-foo"

当我检查代码库时，我找不到与这两个相关的样式。

进行这些更改后，应该会按您预期的方式工作。

提示，ModalRoute 也接受 props 道具。因此，您可以执行以下操作而不是传递 this.beerProfile，它也应该有效

<ModalRoute
  path={`/details/${beer.id}`}
  props={this.props}
  parentPath="/"
  component={BeerProfile}
/>

目前在我的本地，它按预期工作。请尝试让我知道它是否也适合您。

React-router-modal 奇怪的行为 - 我需要点击两次才能返回，应该只有一次

React-router-modal strange behavior - I need two clicks to go back, should be just one

javascript

css

reactjs

react-router

react-modal