эквивалент document.getElementById () в React 2020 - PullRequest
Новая
       6

эквивалент document.getElementById () в React 2020

0 голосов
/ 29 марта 2020

У меня есть компонент с именем Button. js, в котором есть кнопка, при нажатии которой я просто хотел бы узнать, получаю ли я доступ к div в другом компоненте под названием Timer. js. В vanilla javascript я бы просто использовал document.getElementById () для захвата узла DOM. Как это делается в React?

Я встречал callback-ссылки в документах , но это не работает. Если использование ссылки не является способом React для доступа к элементам DOM, пожалуйста, укажите мне лучший способ сделать это. Заранее спасибо.

Кнопка. js

    function Button() {
    const getHtml = () => {
        const node = test.current;
        console.log(node);
    }
return (
         <button onClick={getHtml}>GetHtml</button>
       )
}

Таймер. js

function Timer() {
  const test = useRef(null);
  return (
   <div ref={test}>... </div>
   <Button />
}

1 Ответ

1 голос
/ 29 марта 2020

Я бы не использовал ссылку для проверки, отображается ли компонент внутри другого. Вы можете получить то, что ищете, с помощью createContext и useContext.

(Это может сработать так, как если бы вы это делали. Если вы передадите ссылку кнопке как опору).

С контекстом: вы создаете TimerContext.Provider в своем компоненте Timer, и с помощью кнопки вы можете проверить с помощью useContext(TimerContext), находится ли ожидаемый ключ в объекте. Если его там нет, то кнопка не находится внутри вашего таймера.

Пожалуйста, посмотрите на фрагмент ниже или в следующем Codesandbox . 

//import React, { useContext, createContext } from "react";
//import "./styles.css";

const { useContext, createContext } = React;

const ContainerContext = createContext({
  isInContainer: null
});

const Container = () => {
  return (
    <ContainerContext.Provider value={{ isInContainer: true }}>
      <p>
        In container:
        <Button />
      </p>
    </ContainerContext.Provider>
  );
};

const Button = () => {
  const { isInContainer } = useContext(ContainerContext);
  console.log(isInContainer);
  const isInside = () => {
    alert(isInContainer ? "clicked inside" : "not in container");
  };

  return <button onClick={isInside}>Click me</button>;
};

function App() {
  return (
    <div className="App">
      <Container />
      <Button />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Обновление 15.04.2020

Сначала вопрос мне не был понятен, но теперь я понимаю дело. Идея состоит в том, чтобы иметь компонент Editor, в котором вы пишете разметку, которую можно использовать для создания скопированного представления фрагмента и / или вывода разметки html.

Для этого лучше всего использовать ссылка на компонент Editor и передача его в качестве реквизита компоненту предварительного просмотра / вывода - это также возможно в контексте, но передать его проще.

Как в следующем Песочница .

...