在 React 应用程序中实现 RTL 支持的最佳方式是什么?有没有办法覆盖默认值<p>
and <span>
标签(组件)来添加 RTL 支持,这样我就不必重写我已经编写的组件来支持 RTL? (例如,有一些全局变量window.RTL
,所以当设置为 true 时拥有所有<p>
and <span>
标签将文本方向翻转为 RTL)。我可能会改变构建系统,或者制作一个 babel 插件,它将取代所有React.createElement("p" ...)
用我自己的 p 标签实现,但是有更好的解决方案吗?
Thanks.
更好的方法是使用 CSS / HTML 功能:
-
direction
CSS 属性
- 统一码符号
‏
/ ‎
- 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)