Question

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

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

我需要以确保props包含变量name和id，因为否则我想做的事情是行不通的（现在我知道这个代码无论如何都会起作用，但假设它说它不会出现。

React demand 是否有办法将某些道具传递给某个组件？

也许这是显而易见的事情，但我无法找到有关它的任何信息。

Answer 1

您可以使用PropTypes。它早先是React的一部分，但现在它有自己的npm包https://www.npmjs.com/package/prop-types。如果没有提供道具，这将给你一个运行时错误。它也很有用，因为短裤可以在你想念它们时发出警告 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
};

在组件上设置必需的道具

1 个答案: