Как добавить валидацию, чтобы избавиться от ошибки линтинга? - PullRequest
Новая
       12

Как добавить валидацию, чтобы избавиться от ошибки линтинга?

0 голосов
/ 02 декабря 2018

с приведенным ниже кодом, как я могу избавиться от ошибки линтинга:

Ошибка линтинга: 

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,
]);

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

PropTypes - только проверка, и они действуют только в разработке (в большинстве установок).Большинство настроек производственной сборки отбрасывают PropTypes для оптимизации.

Чтобы решить вашу проблему, в вашем примере есть хитрое определение Компонента.

renderFirstForm - это опора, используемая в компоненте LandingPage.Jumbotron.FluidDarkAnimated.Но я не совсем уверен, в каком компоненте productHero используется.

В любом случае PropTypes являются статическими свойствами класса.Таким образом, они могут быть добавлены в любом месте вашего кода.Вы даже можете добавить PropTypes для другого компонента в другом файле.

Чтобы избавиться от 

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
}

YouВы можете выбрать свой PropType из PropTypes

0 голосов
/ 02 декабря 2018

try twoColumn.propTypes = {productHero: PropTypes.element.isRequired};

источник ссылки https://reactjs.org/docs/typechecking-with-proptypes.html

...