使用 ReactJs 和 Typescript 在组件中调用主题道具时出错答案

【问题标题】：Error when calling theme Props in component using ReactJs and Typescript使用 ReactJs 和 Typescript 在组件中调用主题道具时出错
【发布时间】：2020-09-26 03:16:02
【问题描述】：

我需要将主题的颜色传递给组件，我正在使用类型脚本（我是初学者）。

我遇到了一个我无法解决的错误。

错误是：参数'props'隐含了'any'类型.ts(7006)

它出现在我的代码的颜色行中

<Linkxx
 color={(props) => props.theme.colors.red}
 size={11}
 weight={500}
 decoration={false}
/>

我的组件

import React from 'react';

import { Container } from './styles';

interface LinkProps {
  color: string;
  size?: number;
  weight?: number;
  decoration?: boolean;
}

const Link: React.FC<LinkProps> = ({ color, size, weight, decoration }) => {
  return (
    <Container
      decoration={decoration}
      weight={weight}
      size={size}
      color={color}
      to="/teste"
    >
      teste
    </Container>
  );
};

export default Link;

出现问题的代码

import React from 'react';

import Header from '../../components/Header';
import Linkxx from '../../components/Link';

import {
  Container,
  Content,
  UserCard,
  Avatar,
  UserData,
  Canais,
  BoxAction,
} from './styles';

const User: React.FC = () => {
  return (
    <>
      <Header />
      <Container>
        <Content>
          <h1>User</h1>
          <UserCard>
            <Avatar />
            <UserData>
              <span>Sample Name</span>
              <small>sample@gmail.com</small>
            </UserData>
            <Canais>
              <span>Adm, Manager</span>
              <div>
                <small>test</small>
                <small>test</small>
                <small>test</small>
              </div>
            </Canais>
            <BoxAction>
              <div>
                <Linkxx
                  color={(props) => props.theme.colors.red}
                  size={11}
                  weight={500}
                  decoration={false}
                />
              </div>
            </BoxAction>
          </UserCard>
        </Content>
      </Container>
    </>
  );
};

export default User;

调用组件时如何使用主题属性？

【问题讨论】：

interface LinkProps 将 color 属性定义为字符串，但您将其传递给函数。
但是我正在传递一个返回字符串的函数，我会尝试更改类型。
(x: PropsType) => string 可能用作类型。

标签： reactjs typescript styled-components

【解决方案1】：

尝试将类型“any”添加到您的“props”参数中：

color={(props: any) => props.theme.colors.red}
size={11}
weight={500}
decoration={false}

因为在 typescript 中您需要指定要发送的 props 的类型，或者它采用定义的默认类型。如果您不想指定任何类型，则显式要求组件期待“any”类型的状态和道具。详细解决方法参考这篇文章：React/typescript: Parameter ‘props’ implicitly has an ‘any’ type error

【讨论】：

【解决方案2】：

试试这个：

<Linkxx
  // color={(props) => props.theme.colors.red} // You passed a function
  color={props.theme.colors.red} // Try passing a value or string i.e. props.theme.colors.red
  size={11}
  weight={500}
  decoration={false}
/>

正如你的界面所说，color 是字符串：

interface LinkProps {
  color: string;  // color is string
  size?: number;
  weight?: number;
  decoration?: boolean;
}

【讨论】：