英文:
lingui library's macro t not working on react
问题
I use the latest library for translation, but the macro t
not working, the <Trans>
working fine.
To Reproduce
- open codesandbox
- yarn install
- yarn start
- click different language on the top of the screen
bug description:
only content in <Trans>content<Trans>
will be translated, but the last content on {hello react}
is not translated.
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import { StoreProvider } from './components/store-provider';
import createStore from './store';
import { LanguageProvider } from './components/language-provider';
import { LangSwitcher } from './components/lang-switcher';
import { DataComponent } from './components/DataComponent';
import { Trans, t } from '@lingui/macro';
const store = createStore();
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<StoreProvider store={store}>
<LanguageProvider>
<LangSwitcher />
<p>
<Trans>hello world</Trans>
</p>
<DataComponent data={t`hello react`} />
</LanguageProvider>
</StoreProvider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@lingui/react": "^4.1.2",
"@reduxjs/toolkit": "^1.9.5",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"make-plural": "^7.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-scripts": "5.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.2.3",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"extract": "lingui extract --clean",
"compile": "lingui compile --strict"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@lingui/cli": "^4.1.2",
"@lingui/macro": "^4.1.2"
}
}
lingui.config.ts:
const linguiConfig = {
catalogs: [
{
path: '<rootDir>/src/locales/{locale}/messages',
include: ['<rootDir>/src'],
},
],
compileNamespace: 'cjs',
fallbackLocales: {
default: 'en-US',
},
format: 'po',
formatOptions: {
lineNumbers: false,
},
locales: [
'en-US',
'zh-CN',
'zh-TW',
],
orderBy: 'messageId',
rootDir: '.',
runtimeConfigModule: ['@lingui/core', 'i18n'],
sourceLocale: 'en-US',
pseudoLocale: 'pseudo',
}
export default linguiConfig
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "src"
},
"include": [
"src"
]
}
英文:
I use the latest library for translation, but the macro t
not working, the <Trans>
working fine.
To Reproduce
- open codesandbox
- yarn install
- yarn start
- click different language on the top of screen
bug description:
only content in <Trans>content<Trans>
will translated, but the last content on {hello react}
not translated.
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import { StoreProvider } from './components/store-provider';
import createStore from './store'
import { LanguageProvider } from './components/language-provider';
import { LangSwitcher } from './components/lang-switcher';
import { DataComponent } from './components/DataComponent';
import { Trans, t } from '@lingui/macro';
const store = createStore();
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<StoreProvider store={store}>
<LanguageProvider>
<LangSwitcher />
<p>
<Trans>hello world</Trans>
</p>
<DataComponent data={t`hello react`} />
</LanguageProvider>
</StoreProvider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@lingui/react": "^4.1.2",
"@reduxjs/toolkit": "^1.9.5",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"make-plural": "^7.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-scripts": "5.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.2.3",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"extract": "lingui extract --clean",
"compile": "lingui compile --strict"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@lingui/cli": "^4.1.2",
"@lingui/macro": "^4.1.2"
}
}
lingui.config.ts:
const linguiConfig = {
catalogs: [
{
path: '<rootDir>/src/locales/{locale}/messages',
include: ['<rootDir>/src'],
},
],
compileNamespace: 'cjs',
fallbackLocales: {
default: 'en-US',
},
format: 'po',
formatOptions: {
lineNumbers: false,
},
locales: [
'en-US',
'zh-CN',
'zh-TW',
],
orderBy: 'messageId',
rootDir: '.',
runtimeConfigModule: ['@lingui/core', 'i18n'],
sourceLocale: 'en-US',
pseudoLocale: 'pseudo',
}
export default linguiConfig
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "src"
},
"include": [
"src"
]
}
答案1
得分: 3
Here is the translated content:
每当在React应用程序中使用t
宏时,您应该(1) 使用useLingui()
钩子将您的组件“订阅”到更改,或者(2) - 使用defineMessage
宏定义一个以后使用的消息。它具有与t
相同的签名,并返回一个可传递给i18n._
的MessageDescriptor
。
我建议您修改您的代码如下:
index.tsx:
import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import { StoreProvider } from "./components/store-provider";
import createStore from "./store";
import { LanguageProvider } from "./components/language-provider";
import { LangSwitcher } from "./components/lang-switcher";
import { DataComponent } from "./components/DataComponent";
import { Trans } from "@lingui/macro";
import { msg } from "@lingui/macro";
const store = createStore();
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<StoreProvider store={store}>
<LanguageProvider>
<LangSwitcher />
<p>
<Trans>hello world</Trans>
</p>
<DataComponent data={msg`hello react`} />
</LanguageProvider>
</StoreProvider>
</React.StrictMode>
);
reportWebVitals();
DataComponent.tsx:
import { MessageDescriptor } from "@lingui/core";
import { useLingui } from "@lingui/react";
type props = {
data: MessageDescriptor;
};
export const DataComponent: React.FC<props> = ({ data }) => {
const { i18n } = useLingui();
return <p>{i18n._(data)}</p>;
};
在sandbox中进行了测试,效果如预期。
英文:
Whenever you use the t
macro in a React application, you should (1) "subscribe" your component to changes using the useLingui()
hook, or (2) - use the defineMessage
macro to define a message for later use. It has the same signature as t
and returns a MessageDescriptor
that you can pass to i18n._
.
I would suggest modifying your code as follows:
index.tsx:
import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import { StoreProvider } from "./components/store-provider";
import createStore from "./store";
import { LanguageProvider } from "./components/language-provider";
import { LangSwitcher } from "./components/lang-switcher";
import { DataComponent } from "./components/DataComponent";
import { Trans } from "@lingui/macro";
import { msg } from "@lingui/macro";
const store = createStore();
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<StoreProvider store={store}>
<LanguageProvider>
<LangSwitcher />
<p>
<Trans>hello world</Trans>
</p>
<DataComponent data={msg`hello react`} />
</LanguageProvider>
</StoreProvider>
</React.StrictMode>
);
reportWebVitals();
DataComponent.tsx:
import { MessageDescriptor } from "@lingui/core";
import { useLingui } from "@lingui/react";
type props = {
data: MessageDescriptor;
};
export const DataComponent: React.FC<props> = ({ data }) => {
const { i18n } = useLingui();
return <p>{i18n._(data)}</p>;
};
Tested in the sandbox and it works as expected.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论