React.js: Composer des composants pour créer des onglets

Je suis en train de faire un onglets composant. TabsSwitcher et TabsPanel doit être séparé des composants de sorte qu'ils pourraient être utilisés n'importe où dans les DOM, par exemple TabsSwitcher n'a pas à être suivie par TabsPanel.

Pour le faire fonctionner, j'ai besoin de quelque sorte de la connexion de ces éléments. En outre, TabsSwitcher doit être capable de dire TabsPanel lors d'un onglet a été cliqué.

/** @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
);

Quelle est la meilleure façon de le faire?

Solution: http://jsfiddle.net/NV/5YRG9/

source d'informationauteur NVI | 2014-01-01

  1. 24

    La Réagir docs couvrir en détail dans "La Communication Entre Les Composants" et "Plusieurs Composants". L'essentiel est que le parent doit passer une fonction comme une béquille pour l'enfant, et l'enfant doit appeler cette fonction comme une fonction de rappel lorsqu'il en a besoin:

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

    Pour la TabsContent composant, vous devez déplacer les tabs dans le TabsExample de l'état afin de Réagir automatiquement un nouveau rendu pour vous quand ils changent. Depuis TabsSwitcher et TabsContent sont passés les onglets dans la méthode render, Réagir sait qu'ils sont dépendants sur les onglets et ré-rendus lorsque les changements d'état:

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