Передача пропсов в динамический компонент react

У меня есть объект, содержащий еще объекты, вот структура:

export const dataElements={
   [NameLines.segment]:{
     nameInMenu:'Линия тренда',
     toolsOption:['Стиль','Текст','Координаты'],
     toolsComponents:{
        'Стиль':MainOutletSettingsLine,
        'Текст':TextDrawingElement,
        'Кординаты':CoordsPopUp,
    },
    isIndicator:false,
    presetsAvailable:true
},marketstructure:{
    nameInMenu:'Зиг Заг',
    toolsOption:['Стиль'],
    toolsComponents:{
        'Стиль':MainOutletZigZagSettings,
    },
    isIndicator:true,
    presetsAvailable:false
}

этот объект я использую в компоненте:

  const choosedElement=dataElements[('name' in element ? element.name : uuidElement ) as keyof typeof dataElements] 
  const [choosedTools, setChoosedTools]=useState<string>(choosedElement.toolsOption[0])
  const ChosedComponent = choosedElement.toolsComponents[choosedTools as keyof typeof choosedElement.toolsComponents]
return (
    <>
        <ToolsDrawingElement data={choosedElement.toolsOption} choosedTools={choosedTools} setChoosedTools={setChoosedTools}/>
        <ChosedComponent uuidElement={uuidElement} setCopyPrice1={setCopyPrice1} setCopyPrice2={setCopyPrice2} price1={price1} price2={price2} setPrice1={setPrice1} setPrice2={setPrice2}/>
    </>)

Из-за чего у меня возникает ошибкавведите сюда описание изображения

Это происходит из-за того что chosedComponent может принимать разные пропсы, в итоге как правильно подойти к такому подходу, чтобы передавались нужные пропсы и чтобы не прописывать проверки руками?


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