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

Question

想象一下有一个滑块小部件，像这样..

<SliderWidget width="500" height="360">

默认方向是从左到右，

它可以从右向左配置，

像这样..。

<SliderWidget width="500" height="360" direction="rtl">

它起作用了,

但是我需要用这段代码使滑块工作。

像这样..。

<SliderWidget width="500" height="360" dir="rtl">

滑块插件是SwiperJS，小部件是在ReactJS上构建的，但是如果我给direction="rtl"或dir="rtl"提供了如何实现这个功能的话，那么我要做的就是让小部件运行rtl。是否有方法将direction="rtl"功能扩展到属性dir="rtl"

Answer 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

Answer 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; }