Mam funkcję, która warunkowo renderuje / zwraca ciąg lub komponent dynamiczny w zależności od typu prop:

const renderValue = (value: string | React.ReactNode) => {
  if (React.isValidElement(value)) {
    const Component = value
    return <Component />
  }
  return value
}

Jednak z powyższym kodem otrzymuję następujący komunikat z Typescript:

Typ elementu JSX „Component” nie ma żadnej konstrukcji ani wywołania sygnatur.ts (2604)

Przeczytałem inne odpowiedzi włączone to temat na SO, ale nadal nie zakończyłem odpowiedzi.

2
Fellow Stranger 19 listopad 2019, 14:33
Co się stanie, jeśli usuniesz „ciąg” z typu?
 – 
kind user
19 listopad 2019, 14:45
Możesz użyć return <value />
 – 
Ramin Rezazadeh
19 listopad 2019, 14:45
Nic się nie dzieje.
 – 
Fellow Stranger
19 listopad 2019, 14:47
Składnik musi być pisany wielką literą.
 – 
Fellow Stranger
19 listopad 2019, 14:47
To, co masz, wygląda jak funkcjonalny komponent, czy byłoby w porządku, aby użyć swojej funkcji jako funkcjonalnego komponentu? const RenderValue?
 – 
Alvaro
19 listopad 2019, 14:57

1 odpowiedź

<Component /> to notacja JSX i po prostu mówi Reactowi, aby wyrenderował ten komponent. Jest to możliwe tylko w React Component, który musi zwrócić kod JSX. Aby rozwiązać problem, możesz po prostu sprawdzić, czy argument jest prawidłowym elementem, a następnie wyrenderować go warunkowo w żądanym React Component

import React from 'react'

interface Props {
   value: string | React.ReactNode
}

const SomeComponent:React.FC<Props> = ({value}) => {
  return (
    <div>
      <span>Hello World</span>
      {React.isValidElement(value) ? <Component/> : value}
    </div>
  )
}
0
Kary 19 listopad 2019, 15:35
Dziękuję. Właśnie edytowałem odpowiedź, jeśli wartość nie jest poprawnym elementem, po prostu wyrenderuj ciąg
 – 
Kary
19 listopad 2019, 15:03