javascript - 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 prop 传递给 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}
/>

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