Как исправить ошибку, не присваиваемую InstrinsicAttributes в реагировать?

Question

Я хочу добавить реквизит к повторно используемому компоненту, используя реагировать и набирать текст, и это вызывает у меня ошибку.

Тип marginleft: число не присваивается атрибутам типа Intrinsi c.

Что я пытаюсь сделать?

У меня есть многократно используемые компоненты, а именно Text и Count.

Я использую текстовый компонент в компоненте Count, а код такой, как показано ниже,

function Parent() {
    render = () => {
        return (
            <Count marginleft={8}/> //this is where i get the error
        )
     }
 }

 interface Props {
     marginleft?: number;
 }
 function Count = () => {
     render = () => {
         return (
             <Wrapper>
                 <Text color="red"/>
             </Wrapper>
        )
    }
}
const Wrapper = styled.div<Props>`
    margin-left: ${props => props.marginleft + 'px' || 0};
`;


interface Props {
    color?: string;
}

const Text = styled.span<Props>`
    line-height: ${props => props.lineh || 4.5};
`;

Я не уверен, почему я получаю эту ошибку. Я хочу добавить marginleft prop к компоненту Count, чтобы я мог разместить его и настроить в любом месте приложения.

Может ли кто-нибудь помочь мне с этим. спасибо.

Answer 1

Я пытался привести в порядок ваш код. Я не могу запустить и проверить, работает ли он, но я надеюсь, что это будет полезно для вас. Вы не можете использовать render внутри функционального компонента, и в большинстве случаев вам не нужно использовать оператор возврата.

interface IWrapperProps {
  marginleft: number;
}

interface ITextProps {
  color: string;
}

const Wrapper = styled.div<IWrapperProps>`
  margin-left: ${(props) => props.marginleft + "px" || 0};
`;

const Text = styled.span<ITextProps>`
  line-height: ${(props) => props.lineh || 4.5};
`;

const Count = ({ marginleft }) => (
  <Wrapper marginleft={marginleft}>
    <Text color="red" />
  </Wrapper>
);

const Parent = () => <Count marginleft={8} />;