React 中从右到左 (RTL) 支持

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

Thanks.

更好的方法是使用 CSS / HTML 功能：

• directionCSS 属性
• 统一码符号‏ / ‎
• Attach .rtl / .ltr课程到body并用它们来改变顺序

在这种情况下，RTL 和 LTR 中 HTML 元素的顺序是相同的。应用 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>