Динамическое имя тега - PullRequest
Новая
       10

Динамическое имя тега

1 голос
/ 03 мая 2019

Я пытаюсь преобразовать систему именования динамических тегов из React в подход, более похожий на hook , и сначала я импортирую и экспортирую несколько компонентов, чтобы можно было вытащить их всесразу по массиву, вот так: 

import Component1 from './Component1/Component1'
import Component2 from './Component2/Component2'

 export {
     Component1,
     Component2
 }

А потом я загружаю их вот так: 

import { useState, useEffect } from "react";
import * as Components from './../AllComponents/Components'

function importHook() {

  const [states, setStates] = useState({
    components: [],
    currentComponent: 0
  })

  useEffect(() => {
    Object.entries(Components).forEach(component => {
      setStates(prevState => ({ components: [...prevState.components, component[1]]}))
   })
  }, []) // Look's into Components and adds every component to the 'components' array so that I can use that array in the next step.

  return states;
}

export default importHook

И после этого я продолжаю так: 

import React from 'react'
import './MainComponent.scss'
import importHook from '../../importHook'

function MainComponent() {

    const { components, currentComponent } = importHook() // Pull and set the values using the hook 

    const TagName = components[currentComponent] // Created the tag name by targeting the first function, seeing as currentComponent should be 0 at the time

    console.log('Tag:  ' + TagName) // undefined

    return (
        <div className="h-100">
            <TagName /> // crashes everything
        </div>
    )

}

export default MainComponent

Итак, я выяснил, что причина того, что <TagName /> дает сбой, заключается в том, что что-то запускается дважды.

Если вы удалите <TagName />, чтобы вы могли получить вывод из console.log и изменить currentComponent внутри const TagName до 0 вы замечаете, что при первом запуске console.log возвращается undefined, а при втором запуске возвращается фактическая функция, которая хранится в массиве.

Так что на самом делемой вопрос только, почему / что выполняется дважды?У меня есть идея, я предполагаю, что это из-за forEach, который добавляет к массиву или что-то в этом роде, но я не совсем уверен.

Что можно сделать, чтобы мы могли иметь всезначения готовы, прежде чем вернуться сюда?Я еще не пробовал это, но я предполагаю, что мог бы ввести if statement, который бы проверял и видел, если переменная пуста, и если да, отображал какой-то экран загрузки или непослушный, но это не кажется лучшимРешение для меня, я знаю, что есть много способов сделать что-то, но не все хороши, и, поскольку я действительно новичок во всем этом, лучше читать / спрашивать.

Об части для чтения, не могуя не нашел много решений о том, о чем я упоминал, или о реализации, о которой я говорил, я пытался использовать useEffect, useCallback и другие подобные, хотя я не уверен, что делал это неправильно ...

...