Question

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

感谢。

Answer 1

更优化的方法是使用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>

Answer 2

简单易行，只需在Sub Test() Dim rng As Excel.Range Set rng = ActiveSheet.Range("FooBar") AllowBothRangeAndVariantArray rng AllowBothRangeAndVariantArray rng.Value2 End Sub Function AllowBothRangeAndVariantArray(ByVal v As Variant) v = (v) '* if v is a Range this will call the default member which is value 'Debug.Print v(1, 1) End Function中将dir的{{1}}属性设置如下：

<html>

更新：如果您的应用程序完全是RTL，只需在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();，但是如果用户可以选择其他语言（可能是RTL或LTR），则可以像上面的示例那样进行操作，并且用CSS处理其他事情...

只需检查用户选择的语言是RTL，dir="rtl"就可以让CSS处理外观。

Answer 3

这是您的解决方案：

首先创建一组 rtl 语言区域设置，如下所示：
```
 const rtlLanguages = ["ar"]
```

以下是根据您当前的语言更新页面方向的方法：

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

现在，当您设置新语言时，请使用上面的函数更新页面方向，如下所示：
```
 setPageDirection("en") // ltr
 setPageDirection("ar") // rtl
```

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

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

3 个答案: