- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我正在浏览一个关于 tutsplus 的 React 教程,它有点旧,而且代码不能像最初编写的那样工作。实际上,我完全同意这一点,因为它迫使我更加独立地学习,但是我花了一段时间来解决一个我无法弄清楚的错误。该错误包括无法传递对象键,这会阻止我的程序更新正确对象的状态。
如果您想运行此代码并查看它的运行情况,首先是存储库:https://github.com/camerow/react-voteit
我有一个看起来像这样的子组件:
var FeedItem = React.createClass({
vote: function(newCount) {
console.log("Voting on: ", this.props, " which should have a key associated.");
this.props.onVote({
key: this.props.key,
title: this.props.title,
description: this.props.desc,
voteCount: newCount
});
},
voteUp: function() {
var count = parseInt(this.props.voteCount, 10);
var newCount = count + 1;
this.vote(newCount);
},
voteDown: function() {
var count = parseInt(this.props.voteCount, 10);
var newCount = count - 1;
this.vote(newCount);
},
render: function() {
var positiveNegativeClassName = this.props.voteCount >= 0 ?
'badge badge-success' :
'badge badge-danger';
return (
<li key={this.props.key} className="list-group-item">
<span className={positiveNegativeClassName}>{this.props.voteCount}</span>
<h4>{this.props.title}</h4>
<span>{this.props.desc}</span>
<span className="pull-right">
<button id="up" className="btn btn-sm btn-primary" onClick={this.voteUp}>↑</button>
<button id="down" className="btn btn-sm btn-primary" onClick={this.voteDown}>↓</button>
</span>
</li>
);
}
});
现在,当有人点击投票按钮时,所需的行为是 FeedItem.vote() 方法将对象发送到主 Feed 组件:
var FeedList = React.createClass({
render: function() {
var feedItems = this.props.items;
return (
<div className="container">
<ul className="list-group">
{feedItems.map(function(item) {
return <FeedItem key={item.key}
title={item.title}
desc={item.description}
voteCount={item.voteCount}
onVote={this.props.onVote} />
}.bind(this))}
</ul>
</div>
);
}
});
应该通过父组件的 onVote 函数传递该键:
var Feed = React.createClass({
getInitialState: function () {
var FEED_ITEMS = [
{
key: 1,
title: 'JavaScript is fun',
description: 'Lexical scoping FTW',
voteCount: 34
}, {
key: 2,
title: 'Realtime data!',
description: 'Firebase is cool',
voteCount: 49
}, {
key: 3,
title: 'Coffee makes you awake',
description: 'Drink responsibly',
voteCount: 15
}
];
return {
items: FEED_ITEMS,
formDisplayed: false
}
},
onToggleForm: function () {
this.setState({
formDisplayed: !this.state.formDisplayed
});
},
onNewItem: function (newItem) {
var newItems = this.state.items.concat([newItem]);
// console.log("Creating these items: ", newItems);
this.setState({
items: newItems,
formDisplayed: false,
key: this.state.items.length
});
},
onVote: function (newItem) {
// console.log(item);
var items = _.uniq(this.state.items);
var index = _.findIndex(items, function (feedItems) {
// Not getting the correct index.
console.log("Does ", feedItems.key, " === ", newItem.key, "?");
return feedItems.key === newItem.key;
});
var oldObj = items[index];
var newItems = _.pull(items, oldObj);
var newItems = this.state.items.concat([newItem]);
// newItems.push(item);
this.setState({
items: newItems
});
},
render: function () {
return (
<div>
<div className="container">
<ShowAddButton displayed={this.state.formDisplayed} onToggleForm={this.onToggleForm}/>
</div>
<FeedForm displayed={this.state.formDisplayed} onNewItem={this.onNewItem}/>
<br />
<br />
<FeedList items={this.state.items} onVote={this.onVote}/>
</div>
);
}
});
我的逻辑依赖于能够协调 onVote 函数中的键,但是键 Prop 没有被正确传递。所以我的问题是,我如何通过这种“单向流”将它们传递给我的父组件?
注意:请随意指出其他问题或更好的设计决策,或绝对的愚蠢。甚至我问错了问题。
期待对这个很酷的框架进行很好的探索。
最佳答案
The key
prop has a special meaning in React .它不会作为 prop 传递给组件,但会被 React 用来帮助协调集合。如果你知道d3 ,它的工作原理类似于 selection.data()
的关键功能。它允许 React 将前一棵树的元素与下一棵树的元素相关联。
你有一个 key
很好(如果你传递一个元素数组,你需要一个),但是如果你想把这个值传递给组件,你应该有另一个属性:
<FeedItem key={item.key} id={item.key} ... />
(并在组件内访问 this.props.id
)。
关于javascript - 在 React.js 中将 key 传递给 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30465651/
查看“mysqldump -d”并看到一个键是 KEY,而不是“PRIMARY KEY”或“FOREIGN KEY” 什么是关键? 示例: CREATE TABLE IF NOT EXISTS `TA
在我开始使用 Python 的过程中尝试找出最佳编码实践。我用 Pandas 写了一个 csv 到数据框阅读器。它使用格式: dataframe = read_csv(csv_input, useco
在 Flutter 中,用一个例子可以清楚地解释什么? 我的困惑是关于 key,如下面的代码所示。 MyHomepage({Key key, this.title}) : super(key: key
我在我的 Android 应用程序中使用 GCM。要使用 GCM 服务,我们需要创建 Google API key 。因此,我为 android、服务器和浏览器 key 创建了 API key 。似乎
我想在 azure key 保管库中创建一个 secret ,该 key 将具有多个 key (例如 JSON)。 例如- { "storageAccountKey":"XXXXX", "Co
尝试通过带有 encodeforURL() 的 url 发送 key 时,我不断收到错误消息和 decodefromUrl() .代码示例如下。 这是我的入口页面: key = generateSec
是否有检查雪花变体字段中是否存在键的函数? 最佳答案 您可以使用 IS_NULL_VALUE 来查看 key 是否存在。如果键不存在,则结果将为 NULL。如果键存在,如果值为 JSON null,则
我正在尝试运行此命令: sudo apt-key adv --keyserver keys.gnupg.net --recv-keys 1C4CBDCDCD2EFD2A 但我收到一个错误: Execu
我有一个 csv 文件,我正在尝试对 row[3] 进行计数,然后将其与 row[0] 连接 row[0] row[3] 'A01' 'a' 'B02'
如何编写具有这种形式的函数: A(key, B(key, C(key, ValFactory(key)))) 其中 A、B 和 C 具有此签名: TResult GetOrAdd(string key
审查 this method我很好奇为什么它使用 Object.keys(this).map(key => (this as any)[key])? 只调用 Object.keys(this).ind
我有一个奇怪的情况。我有一个字典,self.containing_dict。使用调试器,我看到了字典的内容,并且可以看到 self 是其中的一个键。但是看看这个: >>> self in self.c
我需要在我的 Google Apps 脚本中使用 RSA-SHA256 和公钥签署消息。 我正在尝试使用 Utilities.computeRsaSha256Signature(value, key)
我是 React 的初学者开发人员,几天前我看到了一些我不理解的有趣语法。 View组件上有{...{key}},我会写成 key={key} ,它完全一样吗?你有链接或解释吗? render()
代理 key 、合成 key 和人工 key 之间有什么区别吗? 我不清楚确切的区别。 最佳答案 代理键、合成键和人工键是同义词。技术关键是另一个。它们都表示“没有商业意义的主键”。它们不同于具有超出
问题陈述:在 Web/控制台 C# 应用程序中以编程方式检索并使用存储在 Azure Key Vault 中的敏感值(例如数据库连接字符串)。 据我所知,您可以在 AAD 中注册应用,并使用其客户端
问题陈述:在 Web/控制台 C# 应用程序中以编程方式检索并使用存储在 Azure Key Vault 中的敏感值(例如数据库连接字符串)。 据我所知,您可以在 AAD 中注册应用,并使用其客户端
我正在寻找 Perl 警告的解决方案 “引用键是实验性的” 我从这样的代码中得到这个: foreach my $f (keys($normal{$nuc}{$e})) {#x, y, and z 我在
我正在为 HSM 实现 JCE 提供程序 JCE中有没有机制指定 key 生成类型例如: session key 或永久 key KeyGenerator keygen = KeyGener
我在 Facebook 上创建了一个应用程序。我已经正确添加了 keyhash 并且应用程序运行良好但是当我今天来并尝试再次运行它时它给了我这个错误。 这已经是第二次了。 Previsouly 当我收
我是一名优秀的程序员,十分优秀!