Javascript 在reactjs的导航栏中控制redux属性

我有一个组件数据集页面，它为所选图像呈现不同数据集的一些图像。这取决于在导航顶部栏上单击的选项卡。在我的例子中，有一个数据集非常大，因此加载页面需要更多的时间。如果我等到页面加载完毕，一切正常，但是如果我在reducer将属性传递给我的组件ImageWithRelateds之前单击另一个选项卡，则新页面将加载另一个数据集的信息，该数据集尚未加载

因此，我想了一个解决方案，可以阻止通过导航栏导航，而我有加载运行。但问题是，这个加载是在ImageWithRelateds.js组件中控制的，导航栏是从App.js控制的。所以我需要从App.js访问ImageWithRelateds.js的isLoading属性，我已经有了这个属性，但我不知道怎么做。我只是找到了从子级访问父级属性的方法，而不是反向访问。如果你能在这方面帮助我，或者只是提出另一个解决方案，我将非常感激

App.js

import React, { Component } from 'react';
import { IndexLink } from 'react-router';

import '../styles/app.scss';

class App extends Component {

  constructor(props){
      super(props);
      this.options = this.props.route.data;
  }

  renderContent(){
    if(this.props.route.options) {
      return(<div className="navbar-header nav">
           <a className="navbar-brand" id="title" href="/" >
            IMAGES TEST WEB
          </a>
          <li className="nav-item" key={`key-9999`}>
            <IndexLink to='/home' className="nav-link active" href="#">HOME</IndexLink>
          </li>
          {this.props.route.options.map((opt,i)=>{
            return this.returnOptions(opt,i);
          })}
         </div>
       );
    }
  }


  returnOptions(opt,i){
    return(<li className="nav-item" key={`key-${i}`}>
      <IndexLink to={opt.link} className="nav-link active"
        href="#">{opt.name}</IndexLink>
    </li>);
  }

  render() {
    return (
      <div className="main-app-page">
        <nav className="navbar navbar-default color-navbar fixed">
          <div className="container-fluid">
            {this.renderContent()}
          </div>
        </nav>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

Routes.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, IndexRoute, browserHistory, Link } from 'react-router';

import App from './common/App';
import NotFound from './common/NotFound';
import Store from './store';
import Home from './components/Home';

import DatasetPage from './components/Images/DatasetPage';
import ImageWithRelateds from './components/Images/ImageWithRelateds';

import { options_NavBar } from './customize.js';
import { getQimList, resetQimList} from './actions/index';

const Test = ()=>{
  return(<h2 style={{"paddingLeft":"35%"}} >W E L C O M E !</h2>)
};

export default (
    <Route path="/" components={App} options={options_NavBar} history={browserHistory}>
        <IndexRoute components={Test}/>
        <Route path="/home" component={Home} />
        <Route path="images" >
          <Route path="oxford" component={DatasetPage} onEnter={()=>{
                Store.dispatch(resetQimList());
                Store.dispatch(getQimList('oxford'));
             }} />
          <Route path="paris" component={DatasetPage} onEnter={()=>{
                Store.dispatch(resetQimList());
                Store.dispatch(getQimList('paris'));
             }} />
          <Route path="instre" component={DatasetPage} onEnter={(e)=>{

                Store.dispatch(resetQimList());
                Store.dispatch(getQimList('instre'));
             }} />
          <Route path=":id" component={ImageWithRelateds} />
        </Route>

        <Route path="*" component={NotFound} />
    </Route>
);

---

非常感谢你

react中最基本的原则之一是父母给孩子道具，孩子向父亲发出事件以避免双向绑定

因此，您的App.js应该具有state和isLoading变量，并且您应该向ImageWithRelateds组件传递一个事件函数，如下所示：

<Route path=":id" render={(props) => <ImageWithRelateds {...props} onFinishLoading={loadingFinished} />}>

function loadingFinished() {
   this.setState(prev => ({ ...prev, isLoading: false }))
}

然后，您将在App.js中知道ImageWithRelateds组件中的加载是否完成，然后您将能够执行任何您想要的验证

我建议您阅读有关将事件函数传递给组件的内容，为什么需要它以及如何有效地执行它

希望有帮助

编辑：

您的最终Routes.js代码应该如下所示：

export default class Routes extends React.Component {
  constructor() {
    super();

    this.state = { isLoading: false };

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

  onLoadingFinishded() {
    this.setState(state => {
      ...state,
      isLoading: false
    });
  }

  render() {
    return <Route path="/" components={App} options={options_NavBar} history={browserHistory}>
        <IndexRoute components={Test}/>
        <Route path="/home" component={Home} />
        <Route path="images" >
          <Route path="oxford" component={DatasetPage} onEnter={()=>{
                Store.dispatch(resetQimList());
                Store.dispatch(getQimList('oxford'));
             }} />
          <Route path="paris" component={DatasetPage} onEnter={()=>{
                Store.dispatch(resetQimList());
                Store.dispatch(getQimList('paris'));
             }} />
          <Route path="instre" component={DatasetPage} onEnter={(e)=>{

                Store.dispatch(resetQimList());
                Store.dispatch(getQimList('instre'));
             }} />
          <Route path=":id" render={(props) => <ImageWithRelateds 
          {...props} 
          onLoadingFinished={this.onLoadingFinishded} />} />
        </Route>
        <Route path="*" component={NotFound} />
    </Route>
  }
}

---

我无法确保代码完全运行，因为我没有您的所有项目，但很可能是这样的

抱歉，但我不知道如何执行，因为在我的App.js中，我只有IndexLink，所以我真的不知道如何从routes.js将onfinishload={loadingFinished}属性传递给ImageWithRelateds组件。你能解释一下如何将App.js与Routes.js联系起来，以便通过“loadingFinished”功能吗？它对我不起作用。我想这是因为我使用的是react路由器版本2.8.1。那你呢？