Блог

Я хочу отобразить список из объекта javascript props.fields , длина или ключи которого неизвестны.

Это работает:

 import React from 'react'

interface Props {
  title: string
  fields: Field
}

interface Field {
  [key: string]: string
}

const InfoPanel = (props: Props): JSX.Element => (
  {display(props)}
)

function display(props: Props): Array<JSX.Element> {
  const toDisplay = []
  Object.keys(props.fields).forEach((key: string) => {
    toDisplay.push(
      <div>
        <div className="info__line">{key}</div>
        <div className="info__line">{props.fields[key]}</div>
      </div>
    )
  })
  return toDisplay
}

export default InfoPanel
 

Однако, когда я пытаюсь разложить display функцию на подкомпоненты, она больше не работает:

 import React from 'react'

interface Props {
  title: string
  fields: Field
}

interface Field {
  [key: string]: string
}

const InfoPanel = (props: Props): JSX.Element => (
  {display(props)}
)

function display(props: Props): Array<JSX.Element> {
  const toDisplay = []
  Object.keys(props.fields).forEach((key: string) => {
    toDisplay.push(<Info key={key} value={props.fields[key]} />)
  })
  return toDisplay
}

const Info = (key: string, value: string): JSX.Element => (
  <div>
    <div className="info__line">{key}</div>
    <div className="info__line">{value}</div>
  </div>
)

export default InfoPanel
 

Мой редактор кода возвращает ошибку:

 Const Info: (key: string, value: string) => JSX.Element
Type '{ key: string; value: string; }' is not assignable to type 'string'
 

const Info = (key: string, value: string): JSX.Element const Info = (key: any, value: string): JSX.Element Похоже, что изменение на исправляет эту ошибку, но компонент по-прежнему не отображается.

Почему это не работает и как я могу заставить это работать?

Info не является функциональным компонентом react, функциональные компоненты получают только один параметр, который props

вы можете исправить свой код с помощью двух вариантов

вариант 1 : использовать Info как функцию

 function display(props: Props): Array<JSX.Element> {
  const toDisplay = []
  Object.keys(props.fields).forEach((key: string) => {
    toDisplay.push(Info(key,props.fields[key]))
  })
  return toDisplay
}
 

вариант 2 преобразование вашего Info компонента в функциональный

 toDisplay.push(<Info title={key} value={props.fields[key]} />)

const Info = (props:any): JSX.Element => (
  <div>
    <div className="info__line">{props.title}</div>
    <div className="info__line">{props.value}</div>
  </div>
)