Arquivo Discussoes de Programacao e Tecnologia Olá, estou com uma dúvida de tipagem:
import Input from '../Components/Input'
const GetInputs = (type: string) =>
({
input: <Input />
}[type])
function Builder(type: string) {
const Inputs = GetInputs(type)
return <Inputs type={type} />
}
export default Builder
Eu tipei da seguinte forma, porém ele me dá erro no componente , JSX element type ‘Inputs’ does not have any construct or call signatures.
Alguém consegue me ajudar nisso?
Precisei deixar o any aqui, pq ele não vai retornar um componente exatamente… tanto que o retorno pode ser undefined.
const getInputs = (type: string): JSX.Element | any => ({
input: <Input/>
}[type])
Vc estava tentando chamar um objeto e colocar ele dentro de um componente <Inputs/>, mas isso não tem como funcionar, pq o retorno de getInputs é um objeto.
Tente dar um console.log(inputs), pra ver o tanto de coisa que retorna.
const BuilderComponent = ({type}: { type: string }) => {
const inputs = getInputs(type);
if (inputs) return {...inputs}
return null
}
Esse return null, é pra caso o componente que vc esteja tentando chamar não exista e aí a aplicação não vai quebrar e nem mostrar algo que você não quer.
Exemplo de uso:
<BuilderComponent type={"input"}/>
{/*Como não existe o type button*/}
{/*O componente abaixo não vai retornar nada*/}
<BuilderComponent type={"button"}/>