javascript - React.js - 如何创建 Accordeon(与 sibling 交谈)

Question

我刚开始使用 react.js，我喜欢组件的工作方式。我创建了一个 Card 组件，它会在点击时添加一个 css 类 expanded。这就像一个魅力。现在我希望所有其他卡片在单击另一张卡片后松开 expanded 属性。在 jQuery 中，我会使用 siblings 来做到这一点。

react.js 的正确解决方案是什么？

这是我的代码:

var Card = React.createClass({

    getInitialState: function () {
        return {
            expanded: false,
            //clickCount: 0
        };
    },

    handleClick: function (event) {
        this.setProps({expanded: !this.props.expanded});
    },

    render: function () {
        var cx = React.addons.classSet;
        var classes = cx({
            'card': true,
            'expanded': this.state.expanded
        });

        return (
            <li className={classes} onClick={this.handleClick}>
                <h1>{this.props.name}</h1>
                <h2>{this.props.entf.toFixed(2)} km</h2>
            </li>
        )
    }

});


var App = React.createClass({

    handleClick: function (event) {
        console.log("clicked");
    },

    render: function () {

        var pools = this.props.data.map(function (pool) {
            return (
                <Card onClick={this.handleClick} name={pool.name} entf={pool.entf} />
            );
        });

        return (<ul>
                {pools}
        </ul>
        )
    }
});

Answer 1

而不是使用 siblings，你应该在 App 组件的 state 中为展开的卡片保留一个标识符，并让 React 在以下情况下重新渲染所选卡片发生变化。

这是一个如何使用 React 来实现的示例:

JSfiddle:http://jsfiddle.net/vdw27xpf/

var Card = React.createClass({

    render: function () {
        var cx = React.addons.classSet;
        var classes = cx({
            'card': true,
            'expanded': this.props.expanded
        });

        return (
            <li className={classes} onClick={this.props.onClick}>
                <h1>{this.props.name}</h1>
                <h2>{this.props.entf.toFixed(2)} km</h2>
            </li>
        )
    }

});


var App = React.createClass({

    getInitialState : function(){
        return { expandedCardName : null };
    },

    handleClick: function (value) {
       this.setState({ expandedCardName : value });
    },

    render: function () {

        var pools = this.props.data.map(function (pool) {
            return (
                <Card key={pool.name}
                      expanded = { pool.name == this.state.expandedCardName }
                      onClick={this.handleClick.bind(this,pool.name)} 
                      name={pool.name} entf={pool.entf} />
            );
        }.bind(this));

        return (<ul>
                {pools}
            </ul>
        )
    }
});
var data = [ { name:"card1", entf:60 },{ name:"card2", entf:50 } ]; 
React.render(<App data={data} />, document.body);