javascript - 在组件上设置所需的 Prop

Question

假设我创建了一个这样的自定义组件:

const MyComponent = (props) => (
  <div
    className={props.name}
    id={props.id}>
    {props.children}
  </div>
)

而且我需要确保props包含变量name和id，否则我want to do is not going work(现在我知道这段代码无论如何都会起作用，但假设说它不会起作用)。

在 React 中有没有一种方法可以要求将某些 props 传递给组件？

也许这是显而易见的事情，但我找不到任何相关信息。

Answer 1

您可以使用 PropTypes。它之前是 React 的一部分，但现在它有自己的 npm 包，https://www.npmjs.com/package/prop-types .如果没有提供 props，这会给你一个运行时错误。它也很有用，因为如果您错过它们，linters 会警告您。
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md

import React from 'react';
import PropTypes from 'prop-types'; 

const MyComponent = (props) => (
  <div
    className={props.name}
    id={props.id}>
    {props.children}
  />
);

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  element: PropTypes.arrayOf(PropTypes.element).isRequired
};