问题描述
我有一个直接取自 react-intl 文档示例的 LanguageWrapper 组件
//LanguageWrapper.jsx
import React,{useState} from 'react';
import {IntlProvider} from 'react-intl';
import french from '../lang/fr.json'
import arabic from '../lang/ar.json';
import English from '../lang/en.json';
export const LanguageContext = React.createContext();
const local = navigator.language;
let lang;
if (local === 'en') {
lang = English;
}else {
if (local === 'fr') {
lang = french;
} else {
lang = arabic;
}
}
const LanguageWrapper = (props) => {
const [locale,setLocale] = useState(local);
const [messages,setMessages] = useState(lang);
function selectLanguage(e) {
const newLocale = e.target.value;
setLocale(newLocale);
if (newLocale === 'en') {
setMessages(English);
} else {
if (newLocale === 'fr'){
setMessages(french);
} else {
setMessages(arabic);
}
}
}
return (
<LanguageContext.Provider value = {{locale,selectLanguage}}>
<IntlProvider messages={messages} locale={locale}>
{props.children}
</IntlProvider>
</LanguageContext.Provider>
);
}
export default LanguageWrapper;
//App.jsx
import React,{useContext} from 'react';
import Header from "./components/Header";
import Footer from "./components/Footer";
import { Switch,Route } from 'react-router'
import './App.css';
import ContentArea from "./components/ContentArea";
import {FormattedMessage} from 'react-intl';
import {LanguageContext} from './components/LanguageWrapper'
function App() {
const localeCode = navigator.language;
const languageContext = useContext(LanguageContext)
return (
<div data-testid='app-wrapper' className="App">
<div className="App-header">
<Switch>
<Route>
<Header/>
<ContentArea/>
<select value = {languageContext.locale} onChange={languageContext.selectLanguage}>
<option value= 'en'>English</option>
<option value= 'fr'>french</option>
<option value= 'ar'>arabic</option>
</select>
<p>
<FormattedMessage
id = "app.header"
defaultMessage="Testing in en-US"
values = {{language: localeCode,code: (word)=> <code>{word}</code>}}
/>
</p>
<Footer/>
</Route>
</Switch>
</div>
</div>
);
}
export default App;
//index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import './index.css';
import LanguageWrapper from './components/LanguageWrapper'
ReactDOM.render(
<LanguageWrapper>
<App/>
</LanguageWrapper>
document.getElementById('root'),);
// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.sNowpack.dev/concepts/hot-module-replacement
if (import.Meta.hot) {
import.Meta.hot.accept();
}
现在的问题是我有:
test-ui:
l->src
l-> components
l-> LanguageWrapper.jsx
l-> lang
l-> ar.json
l-> en.json
l-> fr.json
l->index.js
但是当我运行 npm run build 时,我得到:
UnhandledPromiseRejectionWarning: Error: Can't resolve '../lang/fr.json' in '/Users/me/workSpace/apps/testWebApp/test-ui/build/dist'
我完全不知道我做错了什么,但我觉得它很小......有人可以帮助我吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)