Блог

Главная - Вопросы по программированию - Как определить положение и ширину/высоту компонентов реакции?

Как определить положение и ширину/высоту компонентов реакции?

#javascript #html #reactjs

Вопрос:

Я пытаюсь создать приложение react, и то, что я пытаюсь сделать, — это иметь приложение и иметь в нем раздел/компонент, для которого мне понадобится расположение, ширина и высота. Но когда я пытаюсь использовать document.getElementById('area').getBoundingClientRect().width (например, чтобы найти ширину), я не могу нацелиться на компонент. Вместо этого мой код, похоже, терпит неудачу, если я его не использую document.getElementById('root').getBoundingClientRect().width .

Мое досье:

 import './App.css';

class App extends React.Component {
  render() {
    return (
      <main>
        <Space />
      </main>
    );
  }
}

class Space extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div class="space">
        <h1>{document.getElementById('root').getBoundingClientRect().width}</h1>
      </div>
    );
  }
}

export default App;

Я должен использовать 'root' вместо 'area' того, чтобы это работало. «Пространство» — это просто область, координаты которой мне нужно знать.
Спасибо.

Изменить: Вот файл с идентификатором=»root»:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg xml" href="src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Комментарии:

1. В показанном вами коде нет элементов с идентификатором=»root» или id=»область». Можете ли вы показать нам эту часть кода?

2. @NicholasTower уверен

Ответ №1:

В большинстве случаев для получения элемента следует использовать ссылку react, а не document.getElementById. Например, этот код отображает div, а затем в componentDidMount может получить доступ к базовому элементу DOM:

 class Example extends React.Component {
  constructor(props) {
    super(props);
    this.mainDiv = React.createRef();
  }

  componentDidMount() {
    console.log(this.mainDiv.current.getBoundingClientRect().width);
    // Possibly set state to rerender now that you know the width
  }

  render() {
    return (
      <div ref={this.mainDiv}>
        Hello World
      </div>
    );
  } 
}

getElementId иногда может быть полезен, если вам нужно получить элемент, который находится за пределами дерева компонентов react, но это необычно. Если вы пытаетесь использовать getElementId и он не работает, убедитесь, что элемент с этим идентификатором существует. В вашем вопросе не было показано никаких элементов с идентификаторами «root» или «область», поэтому убедитесь, что они являются частью страницы.

Ответ №2:

Для доступа к свойствам DOM в react в react есть концепция, называемая ссылками.Ссылки позволяют нам напрямую обращаться к элементам dom. Поэтому обратитесь к этому codesandbox, чтобы узнать, как заставить его работать в ФУНКЦИОНАЛЬНОМ КОМПОНЕНТЕ с помощью useRef hook.

Обратитесь к этому, объясните с помощью кода, а также посмотрите консоль в песочнице:

Ссылка

Также это может объяснить более теоретически : ССЫЛКА

Метки: