Как мне получить доступ к конкретному элементу в ReactJS

Question

Хочу добавить id к элементу к которому у меня нет доступа или ссылки.

Элементов много (5).

Как мне получить доступ к конкретному элементу?

function Game(p) {
  let { questions, alph } = p;
  let [currentQ, nextQ] = useState(0);
  let chance = 3;
  let question = questions[currentQ];
  let { ans, que } = question;
  let arr = ans.split('');
  let clickHandler = e => {
    let pattern = e.target.textContent;
    let regex = new RegExp(pattern);
    if (ans.match(regex)) {
      LetterList.map(li => console.log(li));
      **\\ Здесь должен быть элемент//**.id= 'openLetter';
    } else {
      chance--;
      alert('У вас осталось ' + chance + '\n попыток.');
    }
  };
  if (chance === 0) {
    nextQ(currentQ++);
    chance = 3;
  }
return (
    <div className="game-box">
      <div className="content">
        <div className="letter_list">
          <LetterList arr={arr} />
          <div className="clear"></div>
        </div>
        <div className="aplh_block">
          <div className="question_block">
            <div className="question">
              <span>
                <strong>вопрос:</strong>
                {que}
              </span>
            </div>
            <div className="clear"></div>
          </div>
          <div className="letter_block">
            <div className="letter_pic">
              <ul id="letter_block_a">
                {alph.map((letter, index) => {
                  return (
                    <li key={letter + index} onClick={clickHandler}>
                      <span>{letter}</span>
                    </li>
                  );
                })}
              </ul>
            </div>
            <div className="slovo">
              <span id="slovo">назвать слово</span>
            </div>
            <div className="clear"></div>
          </div>
        </div>
      </div>
    </div>
  );
}

Answer 1

Для этого можно воспользоваться ref'ами, используйте createRef для классов или useRef в хуках:

// классы
constructor(props) {
  super(props);
  this.myRef = React.createRef()
}
console.log(this.myRef.current)
render (
  return <div ref={this.myRef} />
)

// хуки
const myRef = React.useRef()
console.log(myRef.current)
return <div ref={myRef} />

таким образом Вы сможете "получить" нужный Вам элемент когда он будет представлен в DOM.

БЛОГ НА HUSL

Как мне получить доступ к конкретному элементу в ReactJS

Ответы (1 шт):