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

Question

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

Pav*_*kic 8 javascript right-to-left reactjs

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

谢谢.

Answer 1

Dmi*_*nko 7

更优化的方法是使用CSS/HTML功能:

direction CSS属性
Unicode符号&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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Mam*_*ezo 7

简单易行，只需设置indir的属性如下：<html>index.js

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();

Run Code Online (Sandbox Code Playgroud)

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

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

归档时间：	10 年，8 月前
查看次数：	5127 次
最近记录：	10 年，8 月前