0

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

在该示例中（单击），只需单击一次即可从模态返回，但在我的情况下，我必须单击鼠标两次才能返回，我不知道为什么......

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

该问题的快速演示-> 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>

4

1 回答 1

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 当位置路径名匹配时显示模式的 react-router Route。

=>模态

Modal 在带有背景的模态 div 中呈现其内容。如果您想在不更改路线的情况下显示模式，请使用模式。

所以基本上这是一个非此即彼的情况。如果你想要一个带有不断变化的 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}
/>

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

于 2018-03-18T09:03:43.127 回答