Question

翻译仅在刷新时有效。似乎是因为我在App.js周围使用了包装器，为什么它不起作用。

我还尝试向intlprovider添加一个键，翻译工作正常，但是现在我所有的内部组件都得到刷新。

使用应用包装程序时，有没有一种方法可以使用reactintl而不刷新所有内部组件？

在下面，您可以找到app.js，index.js和应用包装器：

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './styles/global.css';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware, compose  } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';

import rootReducer from './redux/rootReducers';
import AppWrapperContainer from './containers/appWrapperContainer/appWrapperContainer';
import {localeSet} from './redux/actions/localeActions';


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const store = createStore(rootReducer, /* preloadedState, */ composeEnhancers(
    applyMiddleware(thunk)
  ));

if(localStorage.H24Lang)
{
 store.dispatch(localeSet(localStorage.H24Lang));
}

ReactDOM.render((

  <Provider store={store}>
    <AppWrapperContainer/>
  </Provider>

),

document.getElementById('root'));
registerServiceWorker();

AppWrapperContainer.js

import React, { Component } from 'react';
import { IntlProvider, addLocaleData} from "react-intl";
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import messages from '../../messages';
import en from "react-intl/locale-data/en";
import fr from "react-intl/locale-data/fr";
import App from "../../App";

addLocaleData(en);
addLocaleData(fr);



class AppWrapperContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };
}


  render() {
    const {lang} = this.props

    let locale = 
    (navigator.languages && navigator.languages[0])
    || navigator.language
    || navigator.userLanguage
    || lang

    return (
      // <IntlProvider locale={lang} messages={messages[lang]} key={lang}></IntlProvider>
      <IntlProvider locale={lang} messages={messages[lang]} >
        <App/>
      </IntlProvider>
    );
  }
}

AppWrapperContainer.propTypes = {
    lang: PropTypes.string.isRequired
}

//what reducer you need
function mapStateToProps(state) {
  console.log("State is", state);
    return {
      lang: state.locale.lang
    };
}

export default connect(mapStateToProps,null)(AppWrapperContainer);

App.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Home from './screens/home/home';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route,Redirect, Switch } from 'react-router-dom';



class App extends Component {

  constructor(props) {
    super(props);
    this.state = {

    };
  }


  componentWillMount() {

  }

  componentDidMount() {

  }

  render() {
    return (
        <div className="App">
          <Router>
            <div className = "app-main-content">
              <Route exact path='/' component={Home} />
          </Router>

        </div>
    );
  }
}

//what reducer you need
function mapStateToProps(state) {
    return {

    };
}

function mapDispatchToProps(dispatch) {
    return {

    };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

key中的IntlProvider道具迫使React重新安装组件（及其所有子组件），但是您只想重新渲染它们（而不是重新安装）。

首先确认您的存储状态正在按预期更改其语言环境/ lang值，并且此更改已从mapStateToProps到您的AppWrapperContainer组件。然后，确保以componentWillReceiveProps方法接收到它，并且当其值更改时触发重新渲染。然后，将重新渲染所有子项（如果未被shouldComponentUpdate方法阻止）。

顺便问一下，locale中的AppWrapperContainer变量是做什么用的？

ReactIntl仅在刷新浏览器时起作用。

1 个答案:

ReactIntl​​仅在刷新浏览器时起作用。

1 个答案:

ReactIntl仅在刷新浏览器时起作用。