React.js：组成组件以创建选项卡

大佬教程收集整理的这篇文章主要介绍了React.js：组成组件以创建选项卡，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决React.js：组成组件以创建选项卡？

React文档在“ 组件之间通信 ”和“ 多个组件 ”中对此进行了详细介绍。要点是，父级应将一个函数作为道具传递给子级，而子级在需要以下情况时应将该函数作为回调调用：

@H_618_5@var TabsExample = React.createClass({
    handleTabClick: function(item) {
        // Do something with item, maybe set it as active.
    },
    render: function() {
        var tabs = [
            {title: 'first', content: 'Content 1'},
            {title: 'second', content: 'Content 2'}
        ];
        return <div>
            <TabsSwitcher items={tabs} onTabClick={this.handleTabClick}/>
            <TabsContent items={tabs}/>
        </div>;
    }
});

var TabsSwitcher = React.createClass({
    render: function() {
        var items = this.props.items.map(function(item) {
            return <a onClick={this.onClick.bind(this, item)}>{item.title}</a>;
        }.bind(this));
        return <div>{items}</div>;
    },
    onClick: function(item) {
        this.props.onTabClick(item);
    }
});

对于@H_618_5@TabsContent组件，您应该将其@H_618_5@tabs移入@H_618_5@TabsExample状态，以便React在更改时可以自动为您重新渲染。由于@H_618_5@TabsSwitcher和@H_618_5@TabsContent是通过render方法中的选项卡传递的，因此React知道它们依赖于选项卡，并且在状态更改时会重新渲染：

@H_618_5@var TabsExample = React.createClass({
    geTinitialState: function() {
        return {
            activeTabID: 1,
            tabs: [
                {title: 'first', content: 'Content 1', ID: 1},
                {title: 'second', content: 'Content 2', ID: 2}
            ]
        };
    };
    handleTabClick: function(item) {
        // Call `setState` so React kNows about the updated tab item.
        this.setState({activeTabID: item.ID});
    },
    render: function() {
        return (
            <div>
                <TabsSwitcher items={this.state.tabs}
                              activeItemID={this.state.activeTabID}
                              onTabClick={this.handleTabClick}/>
                <TabsContent items={this.state.tabs}
                             activeItemID={this.state.activeTabID}/>
            </div>
        );
    }
});

解决方法

@H_618_5@/** @jsx React.DOM */

var TabsExample = React.createClass({
    render: function() {
        var tabs = [
            {title: 'first',content: 'Content 1'},{title: 'second',content: 'Content 2'}
        ];
        return <div>
            <TabsSwitcher items={tabs}/>
            <TabsContent items={tabs}/>
        </div>;
    }
});

var TabsSwitcher = React.createClass({
    render: function() {
        var items = this.props.items.map(function(item) {
            return <a onClick={this.onClick}>{item.title}</a>;
        }.bind(this));
        return <div>{items}</div>;
    },onClick: function(E) {
        // notify TabsContent about the click
    }
});

var TabsContent = React.createClass({
    render: function() {
        var items = this.props.items.map(function(item) {
            return <div>{item.content}</div>;
        });
        return <div>{items}</div>;
    }
});

React.renderComponent(
    <TabsExample/>,document.body
);

大佬总结

以上是大佬教程为你收集整理的React.js：组成组件以创建选项卡全部内容，希望文章能够帮你解决React.js：组成组件以创建选项卡所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。