将 JS 小部件的属性 direction=rtl 更改为 dir=rtl答案

【问题标题】：Change attribute of JS widget direction=rtl into dir=rtl将 JS 小部件的属性 direction=rtl 更改为 dir=rtl
【发布时间】：2015-11-30 06:11:51
【问题描述】：

想象一下有一个滑块小部件，像这样..
<SliderWidget width="500" height="360">
默认方向是从左到右，
可以配置从右到左，
像这样..
<SliderWidget width="500" height="360" direction="rtl">
它有效，
但我需要使用此代码使滑块工作 rtl..
像这样..
<SliderWidget width="500" height="360" dir="rtl">
滑块插件是 SwiperJS，小部件是基于 ReactJS 构建的，但如果我给 direction="rtl" 或 dir="rtl"，我想做的是让小部件工作 rtl 如何做到这一点？有没有办法将direction="rtl" 功能扩展到属性dir="rtl"？

【问题讨论】：

为什么不添加一些代码。一个小提琴会很棒
所以你想改变已经开发的 SwiperJS 吗？如果是，那么当前在 SwiperJS 中 this,props.direction 使用你可以修改 this.props.dir
好的..这是一个很好的起点..谢谢 Dhaval Patel
@AnoopChandran：我认为这是你可以实现你想要的方式，所以我想我必须回答我的评论

标签： javascript jquery html reactjs

【解决方案1】：

我不太明白你的问题（为什么不简单地使用direction？），但你总是可以包装一个组件并用它做任何你想做的事情！

var MyWrapper = React.createClass({
  propTypes: {
    dir: React.PropTypes.oneOf(['rtl', 'ltr'])
  },

  getDefaultProps: function() {
    return {
      dir: 'rtl'
    };
  }

  render: function() {
    return <SliderWidget width="500" height="360" direction={this.props.dir}/>;
  }
})

在此处阅读有关道具的更多信息：https://facebook.github.io/react/docs/reusable-components.html

【讨论】：

【解决方案2】：

感谢大家的支持。
我能够通过在“if”条件中添加“OR”表达式来解决此问题。
getInitialState : function () { this.slides = []; var direction = 'ltr'; var directionFactor = 1; if (this.props.direction === 'rtl' || this.props.dir === 'rtl') { direction = 'rtl'; directionFactor = -1; }

【讨论】：