Question

还在研究Flux，我对商店的一些逻辑感到麻烦。假设我已经创建了一个组件，一个管理投票的按钮，就像一个“是”/“否”的开关。

所以我有我的voteButton来管理一个使用Dispatcher来调用一个改变了votedByViewer状态的Store函数的voteAction。

一切都很有趣，一切都正确......如果我只有一个按钮。但如果我有倍数，它们共享同一个商店，因此重新渲染发生在所有倍数组件上。

这是我最初的js：

// Parse all DIV for React management
$("#be-content [id*=like]").each(function (index) {
    var div_id = $(this).attr("id");

    // Render the VoteButton
    ReactDOM.render(
        <VoteButton />,
        document.getElementById(div_id)
    )
});

每个VoteButton都在页面中正确呈现，但每个开关都会更改所有按钮的状态。这是我的VoteButton：

var voteStore = require('../stores/voteStore') ;
var voteActions = require('../actions/voteActions');

var VoteButton = React.createClass({
    getInitialState: function () {
        return {
            voted: voteStore.getVote()
        }
    },
    componentDidMount: function () {
        voteStore.addVoteListener(this._onChange);
    },
    componentWillUnmount: function () {
        voteStore.removeVoteListener(this._onChange);
    },
    handleVote: function () {
        this.state.voted ? voteActions.unvote() : voteActions.vote()
    },
    _onChange: function () {
        this.setState({
            voted: voteStore.getVote()
        })
    },
    render: function () {
        return (
            <div className="link">
                <button onClick={this.handleVote}>{this.state.voted? 'YES':'NO'}</button>
            </div>
        )
    }
});

module.exports = VoteButton;

有关如何解决它的任何想法？也许我必须使用容器？感谢

Answer 1

您只需为正在使用的每个按钮设置一个ID。当你点击它将这个id传递给动作，然后是调度员，然后商店就会收到它。您的商店是一个数组，每个键都是一个按钮ID。当商店收到数据时，它会更改所需的ID。并且您的按钮获取其id的状态（getVote（'buttonid'）;）

Flux，如何正确重用组件？

1 个答案: