React + TypeScript: передача компонентов в массиве в качестве реквизита

Я ищу решение в TypeScript React для передачи нескольких компонентов в массив. Я объявил интерфейсы и импортировал их в свой компонент. Но это дает мне ошибку, поскольку «Тип «Элемент» не имеет общих свойств с типом «IDataView».

Я добавил фрагмент кода к тому, какие шаги я выполняю. Я не уверен, что мне не хватает в приведенном ниже коде.

Мой родительский компонент:

    const DataViewContainer:React.FC = () => {
 return (
    <ViewCollection views={[<BarChart />, <LineChart />]} />
 )
}

Дочерний компонент:

interface IViewCollection {
 views: IDataView[]
}
interface IDataView {
 barChartView?: React.ReactNode;
 lineChartView?: React.ReactNode;
}

const ViewCollection = (views: IViewCollection): JSX.Element => {
 return (
    <Carousel>
       {views.map((cmp) => { return (cmp) }}
    </Carousel>
 )
}

Это похоже на вопрос ху. Что вы пытаетесь сделать с этими элементами? Вы просто хотите сделать их?

Ben Wainwright 17.05.2022 14:02
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
1
34
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Согласно вашему типу, вы предполагаете передать объект. Обратите внимание на исправления props, views и использование внутри компонента ViewCollection.

const DataViewContainer: React.FC = () => {
  return (
    <ViewCollection
      views={{ barChartView: <BarChart />, lineChartView: <LineChart /> }}
    />
  );
};

const ViewCollection = (props: IViewCollection): JSX.Element => {
  return (
    <Carousel>
      {props.views.barChartView}
      {props.views.lineChartView}
    </Carousel>
  );
};

Другие вопросы по теме

Похожие вопросы