Renderować jako ciąg lub komponent z maszynopisami

Question 1

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.

javascript reactjs typescript

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

Answer

<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

Question 2

<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

Renderować jako ciąg lub komponent z maszynopisami

1 odpowiedź

Podobne pytania

Powiązane pytania

Nowe pytania