lingui库中的宏 t 在React上无法正常工作。

huangapple go评论73阅读模式
英文:

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

  1. open codesandbox
  2. yarn install
  3. yarn start
  4. 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 &lt;Trans&gt; working fine.

To Reproduce

  1. open codesandbox
  2. yarn install
  3. yarn start
  4. click different language on the top of screen

bug description:
only content in &lt;Trans&gt;content&lt;Trans&gt; will translated, but the last content on {hello react} not translated.

index.tsx:

import React from &#39;react&#39;;
import ReactDOM from &#39;react-dom/client&#39;;
import reportWebVitals from &#39;./reportWebVitals&#39;;
import { StoreProvider } from &#39;./components/store-provider&#39;;
import createStore from &#39;./store&#39;
import { LanguageProvider } from &#39;./components/language-provider&#39;;
import { LangSwitcher } from &#39;./components/lang-switcher&#39;;
import { DataComponent } from &#39;./components/DataComponent&#39;;
import { Trans, t } from &#39;@lingui/macro&#39;;

const store = createStore();

const root = ReactDOM.createRoot(
	document.getElementById(&#39;root&#39;) as HTMLElement
);
root.render(
	&lt;React.StrictMode&gt;
		&lt;StoreProvider store={store}&gt;
			&lt;LanguageProvider&gt;
				&lt;LangSwitcher /&gt;
				&lt;p&gt;
					&lt;Trans&gt;hello world&lt;/Trans&gt;
				&lt;/p&gt;
				&lt;DataComponent data={t`hello react`} /&gt;
			&lt;/LanguageProvider&gt;
		&lt;/StoreProvider&gt;
	&lt;/React.StrictMode&gt;
);

// 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:

{
  &quot;name&quot;: &quot;my-app&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;@lingui/react&quot;: &quot;^4.1.2&quot;,
    &quot;@reduxjs/toolkit&quot;: &quot;^1.9.5&quot;,
    &quot;@testing-library/jest-dom&quot;: &quot;^5.14.1&quot;,
    &quot;@testing-library/react&quot;: &quot;^13.0.0&quot;,
    &quot;@testing-library/user-event&quot;: &quot;^13.2.1&quot;,
    &quot;@types/jest&quot;: &quot;^27.0.1&quot;,
    &quot;@types/node&quot;: &quot;^16.7.13&quot;,
    &quot;@types/react&quot;: &quot;^18.0.0&quot;,
    &quot;@types/react-dom&quot;: &quot;^18.0.0&quot;,
    &quot;make-plural&quot;: &quot;^7.3.0&quot;,
    &quot;react&quot;: &quot;^18.2.0&quot;,
    &quot;react-dom&quot;: &quot;^18.2.0&quot;,
    &quot;react-redux&quot;: &quot;^8.0.5&quot;,
    &quot;react-scripts&quot;: &quot;5.0.1&quot;,
    &quot;redux-persist&quot;: &quot;^6.0.0&quot;,
    &quot;redux-saga&quot;: &quot;^1.2.3&quot;,
    &quot;typescript&quot;: &quot;^4.4.2&quot;,
    &quot;web-vitals&quot;: &quot;^2.1.0&quot;
  },
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;react-scripts start&quot;,
    &quot;build&quot;: &quot;react-scripts build&quot;,
    &quot;test&quot;: &quot;react-scripts test&quot;,
    &quot;eject&quot;: &quot;react-scripts eject&quot;,
		&quot;extract&quot;: &quot;lingui extract --clean&quot;,
    &quot;compile&quot;: &quot;lingui compile --strict&quot;
  },
  &quot;eslintConfig&quot;: {
    &quot;extends&quot;: [
      &quot;react-app&quot;,
      &quot;react-app/jest&quot;
    ]
  },
  &quot;browserslist&quot;: {
    &quot;production&quot;: [
      &quot;&gt;0.2%&quot;,
      &quot;not dead&quot;,
      &quot;not op_mini all&quot;
    ],
    &quot;development&quot;: [
      &quot;last 1 chrome version&quot;,
      &quot;last 1 firefox version&quot;,
      &quot;last 1 safari version&quot;
    ]
  },
  &quot;devDependencies&quot;: {
    &quot;@lingui/cli&quot;: &quot;^4.1.2&quot;,
    &quot;@lingui/macro&quot;: &quot;^4.1.2&quot;
  }
}

lingui.config.ts:

const linguiConfig = {
  catalogs: [
    {
      path: &#39;&lt;rootDir&gt;/src/locales/{locale}/messages&#39;,
      include: [&#39;&lt;rootDir&gt;/src&#39;],
    },
  ],
  compileNamespace: &#39;cjs&#39;,
  fallbackLocales: {
    default: &#39;en-US&#39;,
  },
  format: &#39;po&#39;,
  formatOptions: {
    lineNumbers: false,
  },
  locales: [
    &#39;en-US&#39;,
    &#39;zh-CN&#39;,
    &#39;zh-TW&#39;,
  ],
  orderBy: &#39;messageId&#39;,
  rootDir: &#39;.&#39;,
  runtimeConfigModule: [&#39;@lingui/core&#39;, &#39;i18n&#39;],
  sourceLocale: &#39;en-US&#39;,
  pseudoLocale: &#39;pseudo&#39;,
}

export default linguiConfig

tsconfig.json:

{
  &quot;compilerOptions&quot;: {
    &quot;target&quot;: &quot;es5&quot;,
    &quot;lib&quot;: [
      &quot;dom&quot;,
      &quot;dom.iterable&quot;,
      &quot;esnext&quot;
    ],
    &quot;allowJs&quot;: true,
    &quot;skipLibCheck&quot;: true,
    &quot;esModuleInterop&quot;: true,
    &quot;allowSyntheticDefaultImports&quot;: true,
    &quot;strict&quot;: true,
    &quot;forceConsistentCasingInFileNames&quot;: true,
    &quot;noFallthroughCasesInSwitch&quot;: true,
    &quot;module&quot;: &quot;esnext&quot;,
    &quot;moduleResolution&quot;: &quot;node&quot;,
    &quot;resolveJsonModule&quot;: true,
    &quot;isolatedModules&quot;: true,
    &quot;noEmit&quot;: true,
    &quot;jsx&quot;: &quot;react-jsx&quot;,
		&quot;baseUrl&quot;: &quot;src&quot;
  },
  &quot;include&quot;: [
    &quot;src&quot;
  ]
}

答案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 &quot;react&quot;;
import ReactDOM from &quot;react-dom/client&quot;;
import reportWebVitals from &quot;./reportWebVitals&quot;;
import { StoreProvider } from &quot;./components/store-provider&quot;;
import createStore from &quot;./store&quot;;
import { LanguageProvider } from &quot;./components/language-provider&quot;;
import { LangSwitcher } from &quot;./components/lang-switcher&quot;;
import { DataComponent } from &quot;./components/DataComponent&quot;;
import { Trans } from &quot;@lingui/macro&quot;;
import { msg } from &quot;@lingui/macro&quot;;

const store = createStore();

const root = ReactDOM.createRoot(
  document.getElementById(&quot;root&quot;) as HTMLElement
);
root.render(
  &lt;React.StrictMode&gt;
    &lt;StoreProvider store={store}&gt;
      &lt;LanguageProvider&gt;
        &lt;LangSwitcher /&gt;
        &lt;p&gt;
          &lt;Trans&gt;hello world&lt;/Trans&gt;
        &lt;/p&gt;
        &lt;DataComponent data={msg`hello react`} /&gt;
      &lt;/LanguageProvider&gt;
    &lt;/StoreProvider&gt;
  &lt;/React.StrictMode&gt;
);

reportWebVitals();

DataComponent.tsx:

import { MessageDescriptor } from &quot;@lingui/core&quot;;
import { useLingui } from &quot;@lingui/react&quot;;

type props = {
  data: MessageDescriptor;
};

export const DataComponent: React.FC&lt;props&gt; = ({ data }) =&gt; {
  const { i18n } = useLingui();

  return &lt;p&gt;{i18n._(data)}&lt;/p&gt;;
};

Tested in the sandbox and it works as expected.

huangapple
  • 本文由 发表于 2023年5月21日 11:10:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76298143.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定