Ошибка машинописного текста о пропущенных свойствах в стилизованном компоненте в React - PullRequest
0 голосов
/ 10 ноября 2019

Я получил сообщение об отсутствии свойств, а именно:

Тип '{children: Element;ключ: номер;имя_класса: строка;onClick: () => void;} 'отсутствуют следующие свойства из типа' Pick, HTMLDivElement>

И я не могу понять, как понять проблему.

Я попытался поместить все эти {дети: стихия;ключ: номер;имя_класса: строка;onClick: () => void;} в типе реквизита, но безрезультатно.

import React from 'react';
import styled from 'styled-components';

interface BoxProps {
    width?: string;
    height?: string;
    num: number;
    chosen: number;
    title: string;
    value: string;
    className: string;
    key: number;
    showAccordion: (num: number) => void;
    onClick: (e: any) => void;
    children?: React.ReactNode;
}

const BoxContainer = styled.div<BoxProps>`
display: flex;
margin: 1em;
justify-content: center;
align-items: center;
width: ${p => p.width === p.width ? p.width : '8em'}
height: ${p => p.height === p.height ? p.height : '8em'};
padding: 10px;
box-shadow: 5px 8px 5px #888888;
border-radius: 5px;
color: white;
cursor: pointer;
font-weight: bold;
    &.large {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
    &:nth-child(odd) {
        background: #00b2e3;
      }

    &:nth-child(even) {
        background: #44546A;
      }
    &:hover {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
        -webkit-transition: transform 0.3s ease-in-out;
        -moz-transition:transform 0.3s ease-in-out;
        -ms-transition:transform 0.3s ease-in-out;
    }
`;

const ItemText = styled.p`
margin: 0px 10px 0px 10px;
font-family: 'Agenda', san-serif;
font-size: 1.3em;
text-align: center;
`;

const Box: React.FC<BoxProps & { className: string }> = ({ 
                                            width, 
                                            height, 
                                            num, 
                                            chosen, 
                                            title, 
                                            showAccordion,
                                            ...props
                                        }) => {



    return (
        <BoxContainer key={num} 
            className={chosen === num ? 'large' : ''}
            onClick={() => showAccordion(num)}>
            <ItemText>{title}</ItemText></BoxContainer>
    )
}

export default Box;

Сообщение об ошибке: Type '{children: Element;ключ: номер;имя_класса: строка;onClick: () => void;} 'отсутствуют следующие свойства из типа' Pick, HTMLDivElement>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...