使用React.js在选项卡上切换类

小编典典

使用React.js在选项卡上切换类

reactjs

所以我有一个tab-component包含3个项目的项目：

React.DOM.ul( className: 'nav navbar-nav', 
    MenuItem( uid: 'home')
    MenuItem( uid: 'about')
    MenuItem( uid: 'contact)
)

在的.render中MenuItem：

React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick,
    React.DOM.a( href: "#"[email protected], @props.uid)
)

每次单击某个项目时，都会调用一个骨干路由器，该骨干路由器将调用，而tab-component后者又将调用一个page-component。

我仍在努力解决基本上存在单向数据流这一事实。而且我习惯直接操作DOM。

我想做的是将.active类添加到单击的选项卡中，并确保将其从非活动类中删除。

我所知道的CSS技巧，你可以使用data-属性和不同的造型适用于为属性true或false。

骨干路由器已经获取了变量uid并调用正确的页面。我只是不确定如何最好地在选项卡之间切换类，因为一次只能激活一个。

现在，我可以保留有关哪个选项卡被选中的记录，并对其进行切换等。但是React.js已经具有此记录保持功能。

在@handleClick你看，我甚至不希望使用的，因为路由器应该告诉tab-component这些人给的className: '.active'，我想避免的jQuery，因为React.js并不需要直接的DOM操作。

我已经使用@state尝试了一些方法，但是我确定有一种非常优雅的方法来实现此目标，我想我已经看过某人的演示文稿或视频。

我真的必须习惯于改变我的思维方式，以积极地思考React。

我只是在寻找一种最佳实践方式，所以我可以以一种非常笨拙的方式解决它，但是我喜欢React.js，因为它是如此的简单。

阅读 332

2020-07-22

共1个答案

小编典典

尽可能将状态推向更高的组件层次结构，并props在下面的所有级别上对不可变进行处理。将活动选项卡存储在您的设备中tab- component并从数据生成菜单项似乎很有意义（this.props在这种情况下），以减少代码重复：

以下示例的工作JSFiddle +骨干路由器： http
:
//jsfiddle.net/ssorallen/4G46g/

var TabComponent = React.createClass({
  getDefaultProps: function() {
    return {
      menuItems: [
        {uid: 'home'},
        {uid: 'about'},
        {uid: 'contact'}
      ]
    };
  },

  getInitialState: function() {
    return {
      activeMenuItemUid: 'home'
    };
  },

  setActiveMenuItem: function(uid) {
    this.setState({activeMenuItemUid: uid});
  },

  render: function() {
    var menuItems = this.props.menuItems.map(function(menuItem) {
      return (
        MenuItem({
          active: (this.state.activeMenuItemUid === menuItem.uid),
          key: menuItem.uid,
          onSelect: this.setActiveMenuItem,
          uid: menuItem.uid
        })
      );
    }.bind(this));

    return (
      React.DOM.ul({className: 'nav navbar-nav'}, menuItems)
    );
  }
});

除了附加类名和公开click事件外，MenuItem几乎无能为力：

var MenuItem = React.createClass({
  handleClick: function(event) {
    event.preventDefault();
    this.props.onSelect(this.props.uid);
  },
  render: function() {
    var className = this.props.active ? 'active' : null;

    return (
      React.DOM.li({className: className},
        React.DOM.a({href: "#" + this.props.uid, onClick: this.handleClick})
      )
    );
  }
});

2020-07-22