反应组件之间的通信

Question

I am facing an architecture problem when trying this with React. I want to toggle tabs in the most reusable way using React JS.

So, ideally, I am looking for a way, in which on clicking on TabHeading, I deactivate the other TabHeadings in the TabHeader heading and also activate the corresponding TabPane (from this.props.target) in TabContent.

$(".tab-pane").hide();
$(React.findDOMNode(this.props.target)).show();

I want to avoid the solution above. I dont want to use classNames anywhere, or passing the parent component as a prop.Angular has $parent or somekind of variable to call functions on the parent right? Is there a similar way without explicitly passing the parent? Is there a way to communicate with siblings? Please help.

<Tabs>
    <TabHeader>
        <TabHeading active="active" target={self.refs.pane1}>
            Heading 1
        </TabHeading>
        <TabHeading target={self.refs.pane2}>
            Heading 2
        </TabHeading>
    </TabHeader>
    <TabContent>
        <TabPane active="active" ref="pane1">
            Pane 1
        </TabPane>
            <TabPane ref="pane2">
               Pane 2
            </TabPane>
    </TabContent>
</Tabs>

JS File

var React = require("react");
var $ = require("jquery");

var TabHeader = React.createClass({
    render: function(){
        return(
            <div className="tab-header">
                {this.props.children}
            </div>
        );
    }
});

var TabHeading = React.createClass({
    componentDidMount : function(){

    },
    handleClick : function(e){
         //something to set siblings to inactive
         //this.props.active="active";
         // this.props.target.props.active = "active";

    },
    render: function(){
        return(
            <div className="tab-heading" onClick={this.handleClick} >
                {this.props.children}
            </div>
        );
    }
});


var TabContent = React.createClass({
    render: function(){
        return(
            <div className="tab-content">
                {this.props.children}
            </div>
        );
    }
});


var TabPane = React.createClass({
    componentDidMount:function(){
        console.log(this.props.children);
    },
    render: function(){
        return(
            <div className="tab-pane">
                {this.props.children}
            </div>
        );
    }
});


var Tabs = React.createClass({
    componentDidMount:function(){

    },
    render: function(){
        return(
            <div className="tabs">
            {this.props.children}
            </div>
        );
    }
});
Tabs.TabHeader = TabHeader;
Tabs.TabHeading = TabHeading;
Tabs.TabContent = TabContent;
Tabs.TabPane = TabPane;

module.exports = Tabs;

JSfiddle

Answer 1

I found an answer without Flux. Please feel free to suggest ways to improve it.

Tabs.js

var React = require("react");
var $ = require("jquery");


var TabHeading = React.createClass({

render : function(){
        var view  ;

        return (
                <div onClick={this.props.handleClick} className={this.props.active? "active tab-heading" : "tab-heading"}>
                        {this.props.children}
                    </div>      
            );
    }   
 });



var TabPane = React.createClass({
render : function(){

        return (
            <div className={this.props.active? "active tab-pane" : "tab-pane"}>
                    {this.props.children}
                </div>
            );
    }   
});

var Tabs = React.createClass({

handleClick:function(){
    this.props.active = arguments[0];
    this.forceUpdate();
},
render : function(){
    var self = this;
    console.log("rendering");
    var tabHeadings = this.props.tabHeadings.map(function(item,index){
         active = (index==self.props.active);
         return <TabHeading key={index} handleClick={self.handleClick.bind(self,index)} index={index} active={active}>{item}</TabHeading>
    });
    var tabPanes= self.props.tabPanes.map(function(item,index){
         active = (index==self.props.active);
         return <TabPane key={index} active={active}>{item}</TabPane>

    });

    return (
                <div className="tab">
                    <div className="tab-header">
                            {tabHeadings}
                    </div>
                    <div className="tab-content">
                            {tabPanes}
                    </div>
                </div>
        );
}
});

module.exports = Tabs;

File.js

render:function(){

    var self = this;

    var tabHeading1 = (
            <p> Heading 1 </p>
        );
    var tabHeading2 = (
            <p> Heading 2 </p>
        );
    var tabPane1 = (
            <p> Pane 1 </p>
        );
    var tabPane2 = (
            <p> Pane 2 </p>
        );
    var tabHeadings = [tabHeading1,tabHeading2];
    var tabPanes = [tabPane1,tabPane2];

    return (<div>
            <div className="container">
                <Tabs tabHeadings={tabHeadings} tabPanes={tabPanes} active="0"/>
            </div>
            </div>
        );
}

JSFIDDLE - link

Answer 2

Are you open to using Flux? An awful lot of tricky things with React alone become quite simple when you combine Flux with React.

In this case, a store would keep track of the active tab. Clicking on an inactive tab would notify the store that a new tab should become active. All of your individual tabs would subscribe to the store so that when the store changed the state of the active tab, all the siblings would be notified.