Проблема с прокидыванием функции в пропсы. React & TypeScript
Проблема с прокидыванием функции в пропсы. React & TypeScript
Родительский компонент передаёт функцию setFanfic как аргумент для другого компонента.
import React, { useState } from 'react';
import FanficList from './fanfics-list/fanfics-list';
import {FanficsContent} from './fanfics-content/fanfics-contens';
import s from './fanfics.module.css';
export const Fanfics = () => {
const [fanfic, setFanfic] = useState("5fd9eeacf4d7ca5581d97161")
return (
<div className={s.fanficsWrapper}>
<FanficList setFanfic={(id: any) => setFanfic(id)}/>
<FanficsContent />
</div>
);
};
Однако при компиляции возникает ошибка. (Компилятор указывает на аргумент setFanfic в файле выше)
Type '{ setFanfic: (id: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, any, any>> & Readonly<unknown> & Readonly<{ children?: ReactNode; }>'.
Property 'setFanfic' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, any, any>> & Readonly<unknown> & Readonly<{ children?: ReactNode; }>'.ts(2322)
код дочернего компонента
Вот код дочернего компонента, который получает функцию в пропсах:
import React from 'react';
import s from './fanfics-list.module.css';
import withHoc from './fanfics-list-hoc';
const List = (props: any) => {
let fanfics = null
if (props.data.fanfics) {
fanfics = props.data.fanfics.map((e: any) =>
<li key={e.id} onClick={() => props.setFanfic(e.id)}>
<span>{e.name}, </span>
<span>author: {e.author}</span>
</li>)
}
return (
<div className={s.list}>
<ul>{fanfics}</ul>
</div>
);
};
export default withHoc(List);
HOC withHoc
Вот HOC withHoc, снабжающий компонент List данными из gQL.
import {compose} from 'recompose';
import {graphql} from 'react-apollo';
import {fanficsQuery} from '../queries';
export default compose(graphql(fanficsQuery));
fanficsQuery
import {gql} from 'apollo-boost';
export const fanficsQuery = gql`
query fanficsQuery {
fanfics {
id
name
author
}
}
`;
Ответы (1 шт):
Автор решения: Vasujke
→ Ссылка
ты не описал в что за пропсы у тебя в FanficList приходят,
в дочернем
type Props = {
setFanfic: (e: тип) => void
}
const List<Props> = ({setFanfic}) => ...