React + Backbone 嵌套组件

Question

我最近开始将 reactjs 与 backbone 一起使用。我搜索并找到 Dan Abramov's answer here。在我开始使用嵌套组件之前，我一直在成功地使用他的 mixin。

假设我有一个 user 模型如下

{
  id: 1,
  name: "John Doe",
  email: "john@doe.com"
}

连同 users 合集

我的react代码如下

var EditableContent = React.createClass({
    getInitialState: function() {
        return {
            editing: false,
            value: this.props.value,
            temp: this.props.value
        };
    },
    editValue: function() {
        this.setState({editing: true})
    },
    valueChanged: function() {
        var newVal = this.refs.text.getDOMNode().value;
        this.setState({temp: newVal});
    },
    valueUpdated: function() {
        var oldVal = this.state.value,
            newVal = this.refs.text.getDOMNode().value;
        this.setState({
            value: newVal,
            editing: false
        });
        if (this.props.onUpdate) this.props.onUpdate(newVal, oldVal);
    },
    abortEdit: function() {
        var oldVal = this.state.value;
        this.setState({
            value: oldVal,
            temp: oldVal,
            editing: false
        });
    },
    render: function() {
        if (this.state.editing) {
            return(
                <span className={"form-inline"}>
                    <input type="text" className="form-control" ref="text" value={this.state.temp} onChange={this.valueChanged} />
                    <button className={"btn btn-success"} onClick={this.valueUpdated}>
                        <i className={"fa fa-check"}></i>
                    </button>
                    <button className={"btn btn-danger"} onClick={this.abortEdit}>
                        <i className={"fa fa-close"}></i>
                    </button>
                </span>
            );
        } else {
            return (
                <span>{this.state.value}
                    <button className={"btn btn-warning"} onClick={this.editValue}>
                        <i className={"fa fa-pencil"}></i>
                    </button>
                </span>
            );
        }
    }
});

var UserRow = React.createClass({
    mixins: [BackboneMixin],
    getBackboneState: function(props) {
        return {
            user: props.user.toJSON()
        };
    },
    watchBackboneProps:function(props, listenTo){
        listenTo(props.user, 'change');
    },
    emailUpdate:function(email) {
        this.props.user.set('email', email, {silent:true});
    },
    render: function() {
        return (
            <tr>
                <td>{this.state.user.name}</td>
                <td><EditableContent value={this.state.user.email} onUpdate={this.emailUpdate}/></td>
            </tr>
        );
    }
});

var UserTable = React.createClass({
    mixins: [BackboneMixin],
    getBackboneState: function(props) {
        return {
            users: props.users.toJSON()
        };
    },
    watchBackboneProps:function(props, listenTo) {
        listenTo(props.users, 'add remove change reset');
    },
    componentDidMount: function() {
        /**$.get('/api/users.php'), function(data){
            this.props.users.add(data);
        }.bind(this));**/
        this.props.users.add([
            {
                "id": 1,
                "name": "Idona Reese",
                "email": "vehicula.risus@semperpretiumneque.org"
            },{
                "id": 2,
                "name": "Norman Santana",
                "email": "ut.mi.Duis@Cumsociisnatoque.edu"
            },{
                "id": 3,
                "name": "Colt Fulton",
                "email": "mauris.id@ultrices.edu"
            }
        ]);
    },
    render: function() {
        return (
            <table className={"table"}>
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    {this.state.users.map(function(elem){
                        return <UserRow key={elem.id} user={this.props.users.get(elem.id)} />
                    }, this)}
                </tbody>
            </table>
        )
    }
});

React.render(<UserTable users={users} />, document.getElementById('main'))

我不断收到 Uncaught Error: Listener already exists.

我已经得出结论，这是由于嵌套组件，因为当我从 UserRow 中删除混入并改用 getInitialState 时，一切正常。

从视图到模型的数据正确更新，但反之则不然。任何帮助将不胜感激。

提前致谢！

Answer 1

问题出在您的代码中 !。我不确定它是从哪里来的，因为我没有在 mixin 中。

原代码：

_unbindBackboneEvents: function () {
  if (!_.isFunction(this.watchBackboneProps)) {
    return;
  }

来自您的 fiddle 的代码：

_unbindBackboneEvents: function() {
  if (!!_.isFunction(this.watchBackboneProps)) {
    return;
  }

如果您将 !! 固定为 !，它会起作用。

React + Backbone 嵌套组件

React + Backbone nested components

javascript

backbone.js

reactjs