时间戳

首页 > 解决方案 > 如何使用键获取对列表中元素的引用？

reactjs - 如何使用键获取对列表中元素的引用？

问题描述

一个简单的问题，我找不到一个好的答案。

我有一个非常大的项目列表（> 1000，可能大于 10k）。其中每一个都有一个唯一的密钥。是否可以仅通过知道元素的键来获取元素的引用？

我当然可以自己生成参考，但这需要我自己维护一个参考列表。一般来说，这没什么大不了的，但是由于列表很大，如果有一种方法可以仅从键中获取 ref，它可能会更有效。

标签： reactjs

解决方案

key prop 由 React 内部使用，并且永远不会放在 DOM 节点上，因此您不能使用它来查询 DOM，但您可以将它放在 data 属性中并使用它来代替查询。

例子

class App extends React.Component {
  state = {
    items: ["foo", "bar", "baz"]
  };

  handleClick = event => {
    const { key } = event.target.dataset;

    document.querySelectorAll(`input[data-key="${key}"]`)[0].focus();
  };

  render() {
    return (
      <div>
        {this.state.items.map(item => (
          <div key={item}>
            <input data-key={item} value={item} />
            <button data-key={item} onClick={this.handleClick}>
              Focus
            </button>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

推荐阅读