TAB switch components implemented by react

I kinda want to vomit groove, because with the original JS implementation is quite simple a small thing, instead of react to write but it took me a lot of time, perhaps react's writing only in the complex Web application can reflect its advantages! But spit groove to spit groove, to react this elegant code of writing I myself is very fond of Ah! To speak briefly, hoping to have some help for react beginners ...

：

The compilation uses some ES6 syntax, using Webpack as the Translation Packaging tool.

Put the core code on the next ...

var React = require ("react");

var ReactDOM = require ("react-dom");

require ("../ css / style.css");

class TabsControl extends React.Component {

    constructor () {

        super ();

        this.state = {

            currentIndex: 0

        };

    }

    check_tittle_index (index) {

        return index === this.state.currentIndex? "Tab_tittle active": "Tab_tittle";

    }

    check_item_index (index) {

        return index === this.state.currentIndex? "Tab_item show": "Tab_item";

    }

    render () {

        let _this = this;

        return (

            <div>

                {/ * Dynamic Tab Navigation * /}

                <div className = "Tab_tittle_wrap">

                    {React.Children.map (this.props.children, (element, index) => {

                        return (

                            / * The arrow function does not have its own this, this here inherits from the peripheral scope, that is, the component itself * /

                            <div onClick = {() => {this.setState ({currentIndex: index})}} className = {this.check_tittle_index (index)}> {element.props.name} </ div>

                            );

                    })}

                </ div>

                {/ * Tab content area * /}

                <div className = "Tab_item_wrap">

                    {React.Children.map (this.props.children, (element, index) => {

                        return (

                            <div className = {this.check_item_index (index)}> {element} </ div>

                            );

                    })}

                </ div>

            </ div>

            );

    }

}

class TabComponent extends React.Component {

    render () {

        return (

            <div className = "container">

                <TabsControl>

                    <div name = "first">

                        I am the first frame

                    </ div>

                    <div name = "second">

                        I am the second frame

                    </ div>

                    <div name = "third">

                        I am the third frame

                    </ div>

                </ TabsControl>

            </ div>

            );

    }

}

ReactDOM.render (<TabComponent />, document.getElementById ("app"));

The general idea is this:

In the <TabComponent /> component </ TabsControl> component contains the main content area => any number of divs, get these divs through this.props.children in the </ TabsControl> component, and dynamically generate the corresponding number of Tab_tittle Set the appropriate className for the title area and content area to control the color switching of the title area and the display and hiding of the content area. In </ TabsControl>, set the index to remember the clicked area, and each title area has Bind a click processing method, each click will reset the state index value, the component will automatically call this.render method to re-render the view, the className setting rules mentioned above are also achieved by the index value => when the title When the corresponding index value of the area or content area is the same as the index in the state, add a className with a special, dynamic label to them. As for the title area and content area, the index values they have are added by means of the React.Children.map () method of this.props.children ...

/ * Code * /

* onClick = {() => {, when using the arrow function of es6, here this is no longer the trigger object of onclick, but pointing to the component where it is, because the arrow function does not have its own this, this this Inherited from the peripheral scope, that is, the component itself.

* Like

                <TabsControl>

                    <div name = "first">

                        I am the first frame

                    </ div>

                    <div name = "second">

                        I am the second frame

                    </ div>

                    <div name = "third">

                        I am the third frame

                    </ div>

                </ TabsControl>

 

Then use this.props.children in the <TabsControl> component to obtain an array containing three divs. If only one div is included here, the obtained object is an object. ) Such a method to facilitate the operation of the obtained array.

 

/*to sum up*/

React is very good, I like it very much, and the written code is also very beautiful. It will not look loose like the original js code, and I think react is also the trend, so it is not wrong to follow the react !

The tab switching component implemented by react