我对 reactfire 的工作方式感到非常困惑,因为它似乎没有太多关于它的文档。
所以我想删除和更新一些子节点,但我不知道该怎么做。所有教程都只关注检索数据,这些数据被视为常规数组,我什至似乎无法访问它们的键。
这是官方示例: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');
```
'items' 绑定(bind)到 this.state.items。太棒了,现在我有了数据。
但是我该如何操作它呢?获取对正在传递的项目的引用的正确方法是什么?
最佳答案
正如我在评论中所说: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();
},
链接:
关于javascript - 使用 React 和 firereact 从 Firebase 中删除节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29878564/