React 中的从右到左 (RTL） 支持

Right to left (RTL) support in React

本文关键字：RTL 支持 从右到左 React      更新时间：2023-09-26
在

React 应用程序中实现 RTL 支持的最佳方法是什么？有没有办法覆盖默认<p>并<span>标签（组件）来添加 RTL 支持，这样我就不必重写我已经编写的组件以获得 RTL 支持？（例如，要有一些全局变量window.RTL，因此当设置为 true 时，让所有<p>和<span>标签将文本方向翻转为 RTL）。我可能会更改构建系统，或者制作一个 babel 插件，用我自己的 p 标签实现替换所有React.createElement("p" ...)，但有更好的解决方案吗？

谢谢。

一个更优化的方法是使用CSS/HTML功能：

  • direction CSS 属性
  • 统一码符号 &rlm;/&lrm;
  • 将.rtl/.ltr类附加到body并使用它们来更改顺序

在这种情况下，HTML中元素的顺序对于RTL和LTR是相同的。应用的 CSS 规则的差异。

如果你真的需要 React 中元素的顺序，你可以创建自己的组件来反转子项列表，如果 RTL：

const Dir = React.createClass({
  render: function() {
    let children = (this.props.direction == 'rtl' && this.props.children && this.props.children.reverse) ? this.props.children.reverse() : null;
    return <div>
      { children }
    </div>;
  }
});
// And use as:
// directionVariable = 'rtl'|'ltr'
<Dir direction={ directionVariable }>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
</Dir>

简单易用，只需在index.js中设置dir <html>的属性，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
//HERE ->
document.getElementsByTagName('html')[0].setAttribute("dir", "rtl");
//Or you can do it where ever you want, base on user selected language, or something else 
serviceWorker.unregister();

更新：如果您的应用程序是 RTL，只需<html>标签中添加dir="rtl"，但如果用户可以选择可能是 RTL 或 LTR 的不同语言，您可以像上面的例子一样做，并使用 CSS 处理其他事情......

只需检查用户选择的语言是 RTL，document.getElementsByTagName('html')[0].setAttribute("dir", "rtl");让 CSS 处理外观内容。

这是

您的解决方案：

  1. 首先创建一个 RTL 语言区域设置数组，如下所示：

     const rtlLanguages = ["ar"]

  2. 下面介绍了如何根据当前语言更新页面方向：

    function setPageDirection(language) {
  const dir = rtlLanguages.includes(language) ? "rtl" : "ltr"
  document.documentElement.dir = dir
}

  3. 现在，当您设置新语言时，请使用上面的函数更新页面方向，如下所示：

     setPageDirection("en") // ltr
 setPageDirection("ar") // rtl

注意：要在首次呈现期间自动更新页面方向，请在更新语言时尝试将当前语言区域设置（例如："en"）存储在 localStorage 中，然后尝试使用 useEffect（或 componentDidMount），并使用 localStorage.getItem 获取您的语言，只需调用 setPageDirection 函数并提供语言

有一个特殊的 HTML 标签来使用 RTL 方向：

 bdo {
      unicode-bidi: bidi-override;
    }  
    <bdo dir="rtl">
      This text will go right-to-left.
    </bdo>

https://www.w3schools.com/tags/tag_bdo.asp

根据您的项目转到main.tsx或main.js，并用这样的<div dir="rtl"></div>包装<App />标签

 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
   <div dir="rtl">
     <App />
   </div>
  </React.StrictMode>
)

如果你使用 react-i18next

import React from 'react';
import { useTranslation } from 'react-i18next';
import './App.css';
function App()  {
    const { t, i18n } = useTranslation();
    document.body.dir = i18n.dir();
    return (
      <div className="App">
        {t('welcome')}
      </div>
    );
}
export default App;

我正在使用 react-i18next 在选择阿拉伯语时从左到右更改位置。我做了流动，它对我有用。

首先，我转到索引.html并在 body tag 中写了以下内容：

<body dir="ltr">

这将允许页面在选择方向时向左写入。最后，我在我的应用程序中添加了这一行.js这是我的主要代码：

document.body.dir = i18n.dir(); //this will change the direction of the dir in the index.html.
相关文章：