简体   繁体   English

使用非子组件的ReactJS中的子数组唯一键

[英]Child array unique key in ReactJS using a non-child component

So I understand the unique key : if I have something like: 所以我理解唯一键 :如果我有类似的东西:

array.push(<ChildComponent key=some_key />

But if I have something like this: 但是,如果我有这样的事情:

cols.push(<td key={i}>Some value</td>)>

(While I am creating a table component that has pagination...). (虽然我正在创建具有分页功能的表组件...)。 I am not sure about that key... That table supports sorting (for columns) so... I believe when we sort, if we use that "i" key, something will be broken. 我不确定该键...该表支持排序(用于列),所以...我相信,当我们进行排序时,如果使用该“ i”键,则会损坏某些内容。 Is in this case, a key necessary? 在这种情况下,是否需要钥匙? Or it is only necessary in an array that contains child components. 或者仅在包含子组件的数组中是必需的。 In any case, if we don't use a key we get a warning from React that we want to avoid/fix. 无论如何,如果我们不使用键,我们会从React收到警告,我们希望避免/修复该错误。

Index based keys are sufficient unless: 基于索引的键就足够了,除非:

  • items are inserted at or removed from anywhere except the end 项目可插入到末尾或从末尾移出
  • the order of items in the items can change 项目中项目的顺序可以更改
  • items can be replaced with other items 物品可以换成其他物品

If any of those are true, you should use a key which identifies the items themselves, rather than their position in the array. 如果其中任何一个为真,则应使用一个键来标识项本身,而不是它们在数组中的位置。 Otherwise the index sufficiently identifies it. 否则,索引足以识别它。

Using keys correctly has performance improvements when the subtrees are large or involve img/video/other expensive components. 当子树很大或包含img /视频/其他昂贵的组件时,正确使用键可提高性能。 It's also a requirement if you want to animate items being added/removed/reordered correctly. 如果要对要正确添加/删除/重新排序的项目进行动画处理,这也是一项要求。

So if I understand you correctly, "i" is some index of the sorted array? 因此,如果我理解正确,“ i”是排序数组的索引吗? If so, that will break down because components should be keyed to something unique to their data (and thus their rendering), not something that is varient like an index. 如果是这样,那将会失败,因为组件应该被锁定到其数据唯一的键(因此也可以渲染),而不是像索引那样变化的键。

Because the key isn't consistently tied to the same piece of data, this will simply cause the div's to rerender their contents, as opposed to simply rearranging their order. 由于密钥未始终与同一数据绑定,因此这只会导致div重新呈现其内容,而不是简单地重新排列其顺序。 Try setting key to a hash based on their data! 尝试根据其数据将键设置为哈希!

If you're looking for a nice solution to generating unique keys, I plucked this one from some of the React/Flux examples and it's worked great for my team and I. 如果您正在寻找一种生成唯一密钥的不错的解决方案,我从一些React / Flux示例中选择了这个,这对我和我的团队都非常有用。

uuid: function () {
    var i, random;
    var uuid = '';
    for (i = 0; i < 32; i++) {
        random = Math.random() * 16 | 0;
        if (i === 8 || i === 12 || i === 16 || i === 20) {
            uuid += '-';
        }

        uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);
    }
    return uuid;
}

Keys are about state . 关键在于状态 By state I mean not just this.state but also anything you store directly in this and need or want to preserve between renders. 状态,不仅是this.state ,还包括您直接存储在this并且需要或希望在渲染之间保留的任何内容。 If your children do not have state, keys do not matter. 如果您的孩子没有状态,则密钥无关紧要。 You could generate a random key every time for each child and that would work. 您可以每次为每个孩子生成一个随机密钥,这将起作用。 But if some children have state, that approach will create a new child, initialized to its initial state. 但是,如果某些子级具有状态,则该方法将创建一个新的子级,并将其初始化为其初始状态。 So if you need to preserve child state between renders the child key cannot change. 因此,如果需要在渲染之间保留子状态,则子键不能更改。 This will ensure that the child component is preserved rather than recreated. 这将确保子组件得以保留而不是重新创建。

See Child Reconciliation here: http://facebook.github.io/react/docs/multiple-components.html 请参阅此处的儿童和解http : //facebook.github.io/react/docs/multiple-components.html

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 修改非子反应组件的状态数据 - Modify state data for non-child react component 警告:每个孩子都应该有一个唯一的键 - 在 ReactJS 中传递数组 - Warning: Each child should have a unique key - Passing Array In ReactJS 数组或迭代器中的每个子代在reactjs中都应具有唯一的“键”道具 - Each child in an array or iterator should have a unique “key” prop in reactjs 从另一个非子组件收到 state object 后,如何更改它? - How do you change a a state object after receiving it from another non-child component? 非子级div不会占用100%的屏幕,但是一个会吗? - Non-child divs not taking 100% of the screen, but one does? 如何使用js或jquery调整非子图像的大小? - How to resize non-child image with js or jquery? 如何使用唯一键合并 2 个 json,并使用另一个子唯一键深度合并嵌套数组对象 - How to merge 2 jsons using a unique key and deep merge the nested array objects using another child unique key Reactjs:警告列表中的每个孩子都应该有一个唯一的“关键”道具 - Reactjs: Warning Each child in a list should have a unique "key" prop ReactJs-列表中的每个孩子应该有一个唯一的“关键”道具 - ReactJs - Each child in a list should have a unique “key” prop 列表中的每个孩子都应该有一个唯一的“钥匙”道具 Reactjs - Each child in a list should have a unique "key" prop Reactjs
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM