Question

给出以下代码，如何摆脱掉毛错误：

棉绒错误：

renderFirstForm is missing in props validation
productHero is missing in props validation

代码：

import React from 'react';
import PropTypes from 'prop-types';
import { LandingPage } from '@myapp/myapp-ui';
import {
  Experiment,
  Variant,
} from '../classes';


const landingPageExperiment = new Experiment({
  name: 'landingPageExperiment',
  version: 3,
});


const fluidDarkAnimated = new Variant({
  name: 'fluidDarkAnimated',
  enhancer: () => ({
    renderJumbotron: ({ renderFirstForm }) => (
      <LandingPage.Jumbotron.FluidDarkAnimated
        renderFirstForm={renderFirstForm}
      />
    ),
    productHero: (
      <LandingPage.ProductHero.WithVideo />
    ),
    ordering: ({
      productHero,
    }) => (
      <React.Fragment>
        {productHero}
      </React.Fragment>
    ),
  }),
});

const twoColumn = new Variant({
  name: 'twoColumn',
  enhancer: () => ({
    renderJumbotron: ({ renderFirstForm }) => (
      <LandingPage.Jumbotron.TwoColumns
        renderFirstForm={renderFirstForm}
      />
    ),
    productHero: (
      <LandingPage.ProductHero.ListOnly />
    ),

    ordering: ({
      productHero,
    }) => (
      <React.Fragment>
        {productHero}
      </React.Fragment>
    ),
  }),
});

landingPageExperiment.addVariants([
  fluidDarkAnimated,
  twoColumn,
]);

Answer 1

PropTypes只是一种验证，它们仅在开发中起作用（在大多数设置中）。大多数生产构建设置会剥离PropType进行优化。

为解决您的问题，示例中有一个棘手的Component定义。

renderFirstForm是LandingPage.Jumbotron.FluidDarkAnimated组件中使用的道具。但是我不确定在哪个组件中使用productHero。

无论如何，PropTypes是类的静态属性。因此，可以将它们添加到代码中的任何位置。您甚至可以在其他文件中为其他组件添加PropType。

摆脱

renderFirstForm is missing in props validation

您需要将此代码段添加到代码中的某个位置（最好是在组件定义旁边）

LandingPage.Jumbotron.FluidDarkAnimated.propTypes = {
  renderFirstForm: PropTypes.bool // I'm guessing it's a boolean by its name
}

摆脱

productHero is missing in props validation

找出productHero用作哪个组件并添加此代码段

ThatComponentName.propTypes = {
  productHero: PropTypes.object // generic type
}

您可以从PropTypes

中选择您的PropType

Answer 2

尝试twoColumn.propTypes = {productHero：PropTypes.element.isRequired};

引用来源https://reactjs.org/docs/typechecking-with-proptypes.html

如何添加道具验证以消除棉绒错误？

2 个答案: