Question

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

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

我当然可以自己生成引用，但是这需要我维护自己的引用列表。通常，这没什么大不了的，但是由于列表很大，如果有一种仅从键获取引用的方法，则可能会更有效。

Answer 1

关键道具由React内部使用，并且永远不会放在DOM节点上，因此您不能将其用于查询DOM，但是您可以将其放在数据属性中，而用于查询。

示例

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>

如何使用key获得对列表中元素的引用？

1 个答案: