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

Question

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

谢谢。

Answer 1

更好的方法是为此使用 CSS/HTML 功能:

• 方向 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>