有什么方法可以确保我传递带有某些道具的组件答案

【问题标题】：is there any way to make sure that I am passing a component with certain props有什么方法可以确保我传递带有某些道具的组件
【发布时间】：2022-11-01 10:52:05
【问题描述】：

如果我有一个组件将具有 prop 值或子组件作为其他 JSX 功能组件，并且我想确保这些组件具有某些传递的 props

所以在这里我想确定其他开发人员是否使用了输入的组件，例如<Trail value=''/>

【问题讨论】：

只需在Trail 中设置value 属性？
无法指定给定组件需要具有特定的道具。
@kinduser 我希望组件确保传递给它的组件也具有这些道具
为什么？一些重现的问题会有所帮助。

标签： reactjs typescript react-props

【解决方案1】：

您可以为此使用PropTypes。 PropTypes 是一个库，可让您指定组件将接收哪些道具以及是否需要这些道具。

在您的情况下，PropTypes 实现的示例是：

import PropTypes from "prop-types";

export default function Trail(props) {
  return <span>{props.value}</span>;
}

Trail.propTypes = {
  value: PropTypes.string.isRequired
};

如果value 没有作为道具传递给您的组件，则会在控制台中触发警告。

在official React documentation on the topic 和package page 上查找有关使用和类型的更多信息。

【讨论】：

【解决方案2】：

既然你已经用 TypeScript 标记了这个问题，我会相应地回答。

你可以定义你的道具类型。如果没有提供所需的道具，TypeScript 编译器会报错。

type Props = {
    value: string;
};

const Trail = ({ value }: Props) => {
    // Implementation
}

或者，您可以使用interface 而不是type。

有关更多信息，请参阅此备忘单：https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/basic_type_example。

【讨论】：