小编Alv*_*dez的帖子

我想开始讨论创建回调的推荐方法，这些回调接收来自循环内创建的组件的参数。

例如，如果我正在填充将具有“删除”按钮的项目列表，我希望“onDeleteItem”回调知道要删除的项目的索引。所以像这样：

  const onDeleteItem = useCallback(index => () => {
    setList(list.slice(0, index).concat(list.slice(index + 1)));
  }, [list]);

  return (
    <div>
      {list.map((item, index) =>
        <div>
          <span>{item}</span>
          <button type="button" onClick={onDeleteItem(index)}>Delete</button>
        </div>
      )}
    </div>
  ); 

但问题在于 onDeleteItem 将始终向 onClick 处理程序返回一个新函数，导致按钮重新呈现，即使列表没有更改。所以它违背了useCallback.

我想出了我自己的钩子，我称之为useLoopCallback，它通过记住主回调以及循环参数映射到他们自己的回调来解决这个问题：

import React, {useCallback, useMemo} from "react";

export function useLoopCallback(code, dependencies) {
  const callback = useCallback(code, dependencies);
  const loopCallbacks = useMemo(() => ({map: new Map(), callback}), [callback]);

  return useCallback(loopParam => {
    let loopCallback = loopCallbacks.map.get(loopParam);
    if (!loopCallback) { …

什么是通过类名和文本查找元素的选择器？例如:

<div class="a1">some text</div>
<div class="a1">some other text</div>
<div class="a2">some text</div>

假设我只关心带有"a1"类和"some text"的div元素.

在此先感谢,Alvaro