Блог

Я пытаюсь использовать компонент react-faq, но у меня возникла проблема. Я более или менее скопировал тот же пример, что и в ссылке (с дополнительной опечаткой).

До сих пор мой код выглядит так:

индекс.tsx

 import React from "react"
import Faq from "react-faq-component"

interface PropTypes {
    data: {
        title: string,
        rows: [{
            title: string,
            content: string
        }]
    },
    styles: any,
}

const data = {
    title: "FAQ (How it works)",
    rows: [
        {
            title: "Lorem ipsum dolor sit amet,",
            content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,
              ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.
              In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.
              Fusce sed commodo purus, at tempus turpis.`,
        },
        {
            title: "Nunc maximus, magna at ultricies elementum",
            content:
                "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.",
        },
        {
            title: "Curabitur laoreet, mauris vel blandit fringilla",
            content: `Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc, ac sagittis leo elit vel lorem.
            Fusce tempor lacus ut libero posuere viverra. Nunc velit dolor, tincidunt at varius vel, laoreet vel quam.
            Sed dolor urna, lobortis in arcu auctor, tincidunt mattis ante. Vivamus venenatis ultricies nibh in volutpat.
            Cras eu metus quis leo vestibulum feugiat nec sagittis lacus.Mauris vulputate arcu sed massa euismod dignissim. `,
        },
        {
            title: "What is the package version",
            content: "3.2"
        },
    ],
}

const styles = {
    // bgColor: 'white',
    titleTextColor: "blue",
    rowTitleColor: "blue",
    // rowContentColor: 'grey',
    // arrowColor: "red",
}

const config = {
    // animate: true,
    // arrowIcon: "V",
    // tabFocus: true
}

export default function Faq({ data }: PropTypes) {
    return (
        <Faq
            data={data}
            styles={styles}
            //config={config}
        />
    )
}
 

Однако при запуске я npm start получаю следующую ошибку:

Не удалось найти файл декларации для модуля «react-faq-компонент». неявно имеет тип «любой». Попробуйте npm i --save-dev @types/react-faq-component , если он существует, или добавьте новый файл объявления (.d.ts), содержащий declare module 'react-faq-component';

Я даже запустил npm i --save-dev @types/react-faq-component , как он предполагает, но ошибка, которую я получаю после этого, такова:

ERR! 404 Не найдено — ПОЛУЧИТЬ https://registry.npmjs.org/@types/react-faq-component — Не найдено

Итак, как говорится в предложении , у нас есть 2 варианта его решения.

1. Установите файл типов. (В данном случае не работает).
2. Создайте файл .d.ts и объявите модуль внутри него.

Внутри src папки создайте новый файл, например, exports.d.ts и внутри него напишите

 declare module 'react-faq-component';
 

Есть и третий вариант. Внутри файла tsconfig сделайте "noImplicitAny" false к.