我如何声明道具？答案

【问题标题】：How do i declare props?我如何声明道具？
【发布时间】：2021-04-04 11:02:21
【问题描述】：

import "./Sidebaroptions.css";
import { Avatar } from "@material-ui/core";

function Sidebaroptions({ src, url, title }) {
    return (
        <div className="sidebaroptions">
            { src && <Avatar className="sidebaroptions_avatar" src={src} />}
            { url && <img
                className="sidebaroptions_image"
                src={url}
                alt=""
            />}
            <h4>{title}</h4>
        </div>
    )
}

export default Sidebaroptions;

[编译失败。

/Users/Prometheus/mpn/src/Components/Sidebar.tsx /Users/Prometheus/mpn/src/Components/Sidebar.tsx(8,18) 中的 TypeScript 错误： '{ src: string; 类型中缺少属性 'url'标题：字符串； }' 但在 '{ src: any; 类型中是必需的网址：任何；标题：任何； }'。 TS2741

 6 |         <div className = "sidebar">
 7 |             <div className = "sidebar_top">

8 |

Error message screenshot

【问题讨论】：

欢迎来到 Stack Overflow！请使用tour（您将获得徽章！），环顾四周，并阅读help center，尤其是How do I ask a good question?，我还推荐Jon Skeet 的Writing the Perfect Question 和Question Checklist。

标签： reactjs typescript visual-studio

【解决方案1】：

如何声明道具？

通过使用带有React.FunctionComponent（别名React.FC）或React.Component的类型参数。

React.FC 用于功能组件：

interface ExampleProps {
    src: string;
}
const Example: React.FC<ExampleProps> = ({src}) => {
    // ...
};

React.Component 用于class 组件（您也可以定义您的状态类型）：

interface ExampleProps {
    src: string;
}
interface ExampleState {
    something: number;
}
class Example extends React.Component<ExampleProps, ExampleState> {
    constructor(props) {
        super(props);
        this.state = {
            something: 42,
        };
    }
    // ...
    render() {
        const {src} = this.props;
        const {something} = this.state;
        return <div>{src}, {something}</div>;
    }
};

（我在那里使用了声明的接口，但您也可以使用内联类型。）

你发布的代码是一个函数组件，所以你会使用React.FC。我通常使用箭头函数，因为它们（稍微）轻量级并且你不需要传统函数所具有的东西，所以：

import "./Sidebaroptions.css";
import { Avatar } from "@material-ui/core";

interface SidebaroptionsProps {
    src: string;
    url: string;
    title: string;
}
const Sidebaroptions: React.FC<SidebaroptionsProps> = ({ src, url, title }) {
    return (
        <div className="sidebaroptions">
            { src && <Avatar className="sidebaroptions_avatar" src={src} />}
            { url && <img
                className="sidebaroptions_image"
                src={url}
                alt=""
            />}
            <h4>{title}</h4>
        </div>
    );
};

【讨论】：

i.stack.imgur.com/u1WFK.jpg 这是我得到的代码和错误
@GabrielWilliams - 要改进问题，请使用问题上的“编辑”链接。
@GabrielWilliams - 我已添加到答案的末尾。

【解决方案2】：

似乎src 和url 属性并不总是需要您的组件才能工作。您可以使用 ? 将字段设为可选

interface SidebaroptionsProps {
    src?: string;
    url?: string;
    title: string;
}

const Sidebaroptions: React.FC<SidebaroptionsProps> = ({ src, url, title }) => {
    return (
        <div className="sidebaroptions">
            { src && <Avatar className="sidebaroptions_avatar" src={src} />}
            { url && <img
                className="sidebaroptions_image"
                src={url}
                alt=""
            />}
            <h4>{title}</h4>
        </div>
    )
};

或通过提供默认值：

function Sidebaroptions({ title, src = "", url = "" }) {
    return (
        <div className="sidebaroptions">
            { src && <Avatar className="sidebaroptions_avatar" src={src} />}
            { url && <img
                className="sidebaroptions_image"
                src={url}
                alt=""
            />}
            <h4>{title}</h4>
        </div>
    )
}

export default Sidebaroptions;

【讨论】：