Question

我对于反应火的工作方式感到非常困惑，因为在文档方面似乎并没有太多关于它的信息。

所以我想删除并更新一些子节点，但我不知道该怎么做。所有教程都只关注于检索数据，这些数据被视为常规数组，我甚至无法访问其密钥。

以下是官方示例：https://www.firebase.com/blog/2014-05-01-using-firebase-with-react.html

如何使用React执行这些操作？

实例化FB后：

```
this.fb = new Firebase('https://react-testing.firebaseio.com/items');
this.bindAsArray(this.fb, 'items');
```

＆＃39;项目＆＃39;变得束缚于this.state.items。很酷，现在我有了数据。

但我该如何操纵呢？获得对正在传递的项目的引用的正确方法是什么？

Answer 1

正如我在评论中所说：ReactFire是常规Firebase JavaScript SDK的小部分的一个小包装。如果您想构建超出其功能的应用程序，您可以轻松扩展它。

根据您的要求，我继续更改了ReactFire中的以下代码段：

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    out.push(obj[key]);
  }
}

对此：

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    var item = obj[key];
    item['$id'] = key;
    out.push(item);
  }
}

因此，我们现在将每个项目的key()作为数组中项目的“特殊”$id属性传递。

有了这个，我可以将原文的TodoList3类扩展为：

var TodoList3 = React.createClass({
  handleClick: function(key) {
    if (this.props.onClick) {
      this.props.onClick(key);
    }
  },
  render: function() {
    var list = this;
    var createItem = function(item) {
      var boundClick = list.handleClick.bind(list, item['$id']);
      return <li key={ item['$id'] } onClick={boundClick}>{ item.text }</li>;
    };
    return <ul>{ this.props.items.map(createItem) }</ul>;
  }
});

因此，我们现在通过$id / key()标识Todo项目，而不是其索引，并在用户点击该项目时使用该值。

有了这个，我们可以扩展TodoApp3的JSX，以便在用户点击某个项目时传递一个处理程序：

<TodoList3 items={ this.state.items } onClick={this.handleClick} />

然后，该应用将通过调用常规Firebase JavaScript SDK删除该项目。

handleClick: function(key) {
  var firebaseRef = this.state.ref;
  firebaseRef.child(key).remove();
},

链接：

使用React和firereact从Firebase中删除节点

1 个答案: