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

Question

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

谢谢。

原文由 Pavle Lekic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个更好的方法是为此使用 CSS / HTML 功能：

• direction CSS 属性
• Unicode 符号 ‏ / ‎
• 将 .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>

原文由 Dmitry Yaremenko 发布，翻译遵循 CC BY-SA 3.0 许可协议