Question

我正在使用React中的elasticsearch为搜索引擎构建UI。我正在使用分页技术。现在如果有人点击结果，然后返回结果列表，它会从头开始显示。我希望位置在结果被阻塞的同一点上。怎么做？

这是我的代码：

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;

请帮助我，以便此组件不会重新呈现。

Answer 1

如果要在用户返回页面时保持相同的滚动位置，您可能只想在滚动元素上显式设置scrollTop，以便可以在不丢失用户的情况下重新呈现组件。 ; s滚动位置。

这可以通过将用户的滚动位置添加到组件的状态，并使用onScroll更新滚动位置来完成。

或者，使用有助于恢复用户滚动位置的列表库（例如react-virtualized）可能是更清晰的解决方案。

我不想重新渲染我以前的组件

1 个答案: