Как найти элемент по ключевому слову React?

Ответ 1

Доступ к key был удален в React.

Ключ реквизита и ref уже были зарезервированы именами свойств.
...
Вы больше не можете обращаться к this.props.ref и this.props.key из самого экземпляра Component. https://facebook.github.io/react/blog/2014/10/16/react-v0.12-rc1.html#breaking-change-key-and-ref-removed-from-this.props

Вы можете просто использовать другое имя (например, "reactKey") и получить доступ к нему через реквизиты. Вот демонстрация: http://codepen.io/PiotrBerebecki/pen/PGaxdx

class App extends React.Component {
  render() {
    return (
      <div>
        <Child key="testKey1" keyProp="testKey1"/>
        <Child key="testKey2" keyProp="testKey2"/>
        <Child key="testKey3" keyProp="testKey3"/>
        <Child key="testKey4" keyProp="testKey4"/>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log(this.props);  // only 'keyProp' is available

    let getClassName = () => {
      switch (this.props.keyProp) {
        case 'testKey1': 
          return 'red';
        case 'testKey2': 
          return 'green';
        case 'testKey3': 
          return 'blue';
        default: 
          return 'black';
       }
    };

    return (
      <div className={getClassName()}>
        Some Text
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Ответ 2

Если вы хотите получить доступ к DOM-узлу элемента React, используйте ref prop.
Но в большинстве случаев вы можете достичь того, что ищете, не используя ссылки, поэтому убедитесь, что вы не злоупотребляете этой функцией.

Вот некоторая информация из документов React: ссылки и DOM - React

Рефс и ДОМ

Ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга.

Когда использовать ссылки

Есть несколько хороших вариантов использования ссылок:

• Управление фокусом, выделением текста или воспроизведением мультимедиа.
• Запуск императивных анимаций.
• Интеграция со сторонними библиотеками DOM.

Избегайте использования ссылок для всего, что может быть сделано декларативно.

Создание ссылок

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

Доступ к ссылкам

const node = this.myRef.current;