Блог

Главная - Вопросы по программированию - Передать элемент реакции в библиотеку

Передать элемент реакции в библиотеку

#javascript #reactjs

Вопрос:

У меня есть элемент, идентификатор которого я передаю в библиотеку, но для выполнения операций с переданным элементом требуется время. В настоящее время это выглядит так:

   useEffect(() => {
    Promise.all(build("#el")).then(() => {
    ...
    })
  }, [])

  // build() is the function imported from an external library
  // which creates some sort of visualisation of element `el`
  return(
    <>
      <Component1 />
      <div id="el" />
      <Component />
    </>
  )

Поэтому я хотел создать загрузчик, который будет работать до тех пор, пока функция не будет запущена, вот так:

   const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all(build("#el")).then(() => {
    ...
    }).finally(() => setLoading(false));
  }, [])

  if(loading) return <div>Loading...</div>

   return(
    <>
      <Component1 />
      <div id="el" />
      <Component />
    </>
  )

Но проблема в том, что внешняя библиотека не может найти элемент «el», потому что он не существует в DOM до тех пор, пока точечная загрузка не станет ложной. Это сработало бы, если бы я создал элемент непосредственно в index.html но тогда я не смог бы расположить этот элемент.

Есть ли какой-нибудь способ добиться этого?

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

1. build это функция, импортированная из внешней библиотеки, она создает некоторую визуализацию элемента el .

2. Я действительно хочу loading , чтобы состояние выполнялось до тех build() пор, пока оно не будет завершено; Проблема в том, что тогда оно не будет найдено el в DOM. Я почему-то хочу, чтобы он существовал в DOM.

3. при загрузке=true#el не существует

Ответ №1:

Вместо раннего возврата вы могли бы условно отобразить загрузчик в дополнение к пустому #el div.

 return(
  <>
    ... possibly other content

    {loading amp;amp; <div>Loading...</div>)

    ... possibly other content

    {!loading amp;amp; <Component1 />}

    <div id="el"></div>

    {!loading amp;amp; <Component />}

    ... possibly other content
  </>
)

Суть в том, что вы хотите #el , чтобы div отображался независимо от loading состояния. Остальная часть пользовательского интерфейса этого компонента может вращаться вокруг условной визуализации loading государством, если это необходимо.

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

1. Это работает в данном случае, но мой компонент React возвращает несколько элементов, и элемент el должен быть расположен внутри него. Так что ставить его ниже всего остального было бы неправильно, вот почему я возвращал его раньше. Я просто отредактировал свой пример, чтобы показать, что я имею в виду.

2. не могли бы вы использовать display: none; on #el , чтобы скрыть его, но при этом оставаться в DOM, чтобы библиотека могла получить к нему доступ?

3. @ShreySachdeva Этот шаблон не влияет на то, где вы визуализируете <div id="el"></div> внутри этого компонента, он может быть визуализирован там, где вы его визуализировали ранее. Поможет ли это, если я помещу туда»….», чтобы указать, что есть другой контент?

Метки: