3

最近、React / Redux の学習を開始しました。現在、小さな単一ページのアプリケーションを構築しようとしています。

最近、理解できず、修正できない問題に遭遇しました。

コードをお見せしましょう：

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'

import App from './components/App'
import Home from './components/Home'
import About from './components/About'

const reducer = (state = {}, action) => {
  return state
}

const store = createStore(
  combineReducers({
    reducer,
    routing: routerReducer
  })
)

const history = syncHistoryWithStore(hashHistory, store)

ReactDOM.render((
  <Provider store={store}>
    <Router history={history}>
      <Route path='/' component={App}>
        <IndexRoute component={Home}/>

        <Route path='about' component={About}/>
      </Route>
    </Router>
  </Provider>
), document.getElementById('root'))

基本的にこれは、react-router-redux GitHub ページ (セクションTutorialまでスクロール) の例です。唯一の違いは、hashHistoryを使用していることです。

App.js

import React, { Component, PropTypes } from 'react'

import Navigation from './Navigation'

export default class App extends Component {
  render() {
    return (
      <div>
        <Navigation/>

        {this.props.children}
      </div>
    )
  }
}

App.propTypes = {
  children: PropTypes.node
}

ナビゲーション.js

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

export default class Navigation extends Component {
  render() {
    return (
      <ul role='nav'>
        <li><IndexLink to='/' activeStyle={{ color: 'red' }}>Home</IndexLink></li>
        <li><Link to='/about' activeStyle={{ color: 'red' }}>About</Link></li>
      </ul>
    )
  }
}

Home および About コンポーネントは、SPA の状態を視覚化するために <h1> 見出しをレンダリングするだけです。

これまでのところ、すべてが期待どおりにうまく機能しています。ユーザーがAboutリンクをクリックすると、それに応じて URL が変更され、リンクが赤くなります (activeStyle プロパティのため)。

しかし、ここで私の問題が発生します（これをまだ読んでくれてありがとう）：

<Navigation> コンポーネントをreact-redux connect()経由でラップしたいと考えています。だから、これは私の新しいバージョンです

ナビゲーション.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link, IndexLink } from 'react-router'

class Navigation extends Component {
  render() {
    return (
      <ul role='nav'>
        <li><IndexLink to='/' activeStyle={{ color: 'red' }}>Home</IndexLink></li>
        <li><Link to='/about' activeStyle={{ color: 'red' }}>About</Link></li>
      </ul>
    )
  }
}

const NavigationContainer = connect()(Navigation)

export default NavigationContainer

しかし、現在、activeStyle 機能が壊れているようです... アプリをナビゲートすると、現在アクティブなリンクの色が変わりません。

私は本当にこの問題を何時間も解決しようとしました:(どんな助けも大歓迎です!

4

1 に答える 1

9

react-redux の connect() により、場所の状態が変化したときに Navigation とそれに続くリンクが再レンダリングされなくなります。

Navigation の render を追加console.log("Navigation render")すると、 connect() func を追加した後、場所の状態が変化してもコンポーネントが再レンダリングされないことがわかります。

回避する方法はあります

1.方法：場所の変更時にナビゲーションコンプを再レンダリングするために、 prop を追加できます。location={this.props.location}

export default class App extends Component {
  render() {
    return (
      <div>
        <Navigation location={this.props.location}/>

        {this.props.children}
      </div>
    )
  }
}

2.方法:{pure:false} connect() に 追加します。ドキュメント リンク

export default connect(mapStateToProps, actions, null, { pure: false })(Navigation);

3.way:これは React Router 3.0.0-alpha.1 以降で修正されています。

于 2016-07-09T07:05:34.380 に答える