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

Question

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

javascriptreactjsright-to-left

20

什么是在React应用程序中实现RTL支持的最佳方法？是否有一种方法可以覆盖默认的

和标签（组件）以添加RTL支持，以便我不必重写已编写的组件以具有RTL支持？（例如，具有一些全局变量window.RTL，因此当设置为true时，将所有

和标签翻转文本方向为RTL）。我可能可以更改构建系统或制作一个babel插件，该插件将替换所有React.createElement（“p”...）与我的自己的p标记实现，但这是否有更好的解决方案？

谢谢。

- Pavle Lekic

7个回答

7

简单易操作，只需要在index.js中为<html>设置dir属性即可，示例如下：

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处理外观部分。

- Mamrezo

4

以下是你的解决方案：

first of all create an array of rtl language locales, like this:
```
 const rtlLanguages = ["ar"]
```

here's how you can update your page direction based on your current language:

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

now when you set your new language, update the page direction using the function above, like this:
```
 setPageDirection("en") // ltr
 setPageDirection("ar") // rtl
```

注意：为了在首次渲染时自动更新页面方向，请尝试在每次更新语言时将当前语言区域设置（例如：“en”）存储在localStorage中，然后尝试使用 useEffect（或 componentDidMount），并使用 localStorage.getItem获取您的语言，只需调用 setPageDirection 函数并提供语言即可。

- Pr0grammer X

一个快速的提示，如果你想在从右到左的方向修改你的HTML元素，请这样做：html[dir="rtl"] .your-class-name {} 反之亦然。 - Pr0grammer X

1

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

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

- abdurahman-ghazi

1

如果您使用 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;

- khaled mohamed ram

1

有一个特殊的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

- Lucas Matos

0

我正在使用react-i18next，当选择阿拉伯语时将位置从左侧更改为右侧。我已经完成了以下操作，并且对我有效。

首先，我进入index.html并在body标签内编写了以下内容：

<body dir="ltr">

当选择方向时，这将允许页面向左书写。最后，我将此行添加到我的主代码App.js中：

document.body.dir = i18n.dir(); //this will change the direction of the dir in the index.html.

- agha780

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dmitry Yaremenko · Accepted Answer

更优的方法是使用CSS/HTML的能力：

direction CSS属性
Unicode符号&rlm;/&lrm;
在body上附加.rtl/.ltr类，并使用它们来更改顺序

在这种情况下，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>