Question

我使用elasticsearch显示搜索结果，我使用React Router v4 Link在React中显示Modal中的单个组件。我想在结果组件上方显示模态，但实际上它是在Modal中打开一个新页面而后台没有任何内容。

这是我的代码：

Routes.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import App from '../components/app';
import Header from '../components/header';
import Footer from '../components/footer';
import Single from '../components/single';
import NoMatch from '../components/noMatch';
import createHistory from 'history/createBrowserHistory'

const history = createHistory();

class Routes extends React.Component {

render() {
    return(
        <Router history={history}>
             <div className="main">
                <Header />
                <Switch>
                    <Route exact path = "/" component={App}/>
                    <Route path = "/photo/:id/:keyw" component={Single}/> 
                    <Route path = "/*" component={NoMatch} /> 
                </Switch>
                <Footer />
            </div>
        </Router>
    )
}
}

 export default Routes;

我想要的组件应该保持不变，而不是重新渲染：

Searchresults.js

import React from 'react';
import PropTypes from 'prop-types';
import LazyLoad from 'react-lazy-load';
import {
  Link
} from 'react-router-dom';

class SearchResults extends React.Component {

constructor(props) {
    super(props);
    this.state = { results: [] }
}

render () {
    return (
        <div className="cont">
            <hr />
            <ul>
            { this.props.results.map((result) => {
                return (
                            <li key={ result._source.file_name }>
                                <LazyLoad className="lazy">
                                    <Link to={"/photo/" + result._source.file_name + "/" + result._source.keywords}>
                                        <img className="image" src={"http://localhost:3000/photos/" + result._source.file_name} alt="Search Result" />
                                    </Link>
                                </LazyLoad>
                            </li>
                        ) }) }      
            </ul>
        </div>
    )
}
}

SearchResults.propTypes = {
    results: PropTypes.array
}

export default SearchResults;

Single.js

import React from 'react';
import { Modal } from 'react-bootstrap';
import { Link } from 'react-router-dom';

let str;

class Single extends React.Component {

constructor(props) {
    super(props);
    this.state = {showModal: true};
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
}

close() {
    this.setState({ showModal: false });
}

open() {
      if(this.refs.check){
        this.setState({ showModal: true });
      }
}
render() {
    return (
        <Modal show={this.state.showModal} onHide={this.close}>
            <div className="cent">
                <div>
                    <img className="image" src={"/photos/" + this.props.match.params.id} alt={this.props.match.params.id}/>
                </div>
                <div>
                    <h1>File Name: {str = this.props.match.params.id.slice(0, -4)}</h1>
                    <h2><a className="btn btn-success" href={"/ai/" + str + ".ai"}>Download .ai file</a></h2>
                    <h2><a className="btn btn-success" href={"/eps/" + str + ".eps"}>Download .eps file</a></h2>
                    <h3>Keywords : <li>{this.props.match.params.keyw}</li></h3>
                    <Link to="/" className="btn btn-primary">Go Back</Link>
                </div>
            </div>
        </Modal>
    )
}
}

export default Single;

请帮帮我。提前致谢

我想在React中的上一个组件上方显示Modal

0 个答案: