Question

我有一个简单的React组件，如下所示：

mScrollView.setDrawingCacheEnabled(true);
Bitmap bitmap = Bitmap.createBitmap(mScrollView.getDrawingCache());
mScrollView.setDrawingCacheEnabled(false);

我可以看到import React from 'react'; const ListPage = ({todos}) => ( <div> <h6>todos</h6> <ul> {todos.map(({todo, index}) => ( <li key={index}>{todo}</li> ))} </ul> </div> ) ListPage.propTypes = { todos: React.PropTypes.array, }; export default ListPage;的文档显示第二个参数是index，紧邻currentValue。如何改变现有代码来获取第二个参数？

Answer 1

你需要这样：

todos.map((key, index) => { ... })没有参数的对象括号。

({todo, index}) => { ... } - 该语法意味着您希望从函数的第一个参数获取属性todo和index。

您可以看到语法here：

基本语法

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
         // equivalent to:  => { return expression; }

// Parentheses are optional when there's only one parameter:
(singleParam) => { statements }
singleParam => { statements }

// A function with no parameters requires parentheses:
() => { statements }

高级语法

// Parenthesize the body to return an object literal expression:
params => ({foo: bar})

// Rest parameters and default parameters are supported
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

// Destructuring within the parameter list is also supported
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

Answer 2

请注意，如果列表是动态的，则不应使用索引作为键，它是antipattern并且可能导致麻烦。

如果您确定在创建后不必删除或添加项目，则应仅使用索引作为键（如果您添加项目但仅在列表末尾，则仍然可以接受，并且仍然永远不会删除）。否则React可能会在调解你的孩子时出现问题。

最佳做法是为所有待办事项（增量或UUID）添加“id”，并将其用作所有需要它的反应列表的键。

Answer 3

这是一个基于@Timur Bilalov回答的例子，以便于理解

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map((material,index) => console.log(index +" = " + material + " = " + materials[index]));

<强>输出

"0 = Hydrogen = Hydrogen"
"1 = Helium = Helium"
"2 = Lithium = Lithium"
"3 = Beryllium = Beryllium"

<强>参考
https://reactjs.org/docs/lists-and-keys.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

希望有所帮助

使用.map和索引进行反应

3 个答案: