React HoC PropTypes / PascalCase - PullRequest
Новая
       54

React HoC PropTypes / PascalCase

0 голосов
/ 09 октября 2018

В React я пытаюсь передать компонент в качестве реквизита другому компоненту (HoC).Но когда я пытаюсь использовать этот компонент внутри, у меня появляются две ошибки, и компонент не отображается.

Вот ошибки:

"Предупреждение: propTypes был определен как свойство экземпляра в Gridlist. Вместо этого используйте статическое свойство для определения propTypes. "

" Предупреждение: используется неправильный регистр. Используйте PascalCase для компонентов React или строчные буквы для элементов HTML. "

Вот код: 

import React, {Component} from 'react'
import ActivityCard from '../activities-card/activities-card'
import Gridlist from '../grid-list/grid-list'
import PropTypes from 'prop-types'

export default class ActivitiesGrid extends Component {
  propTypes = {
    items: PropTypes.array,
    cellHeight: PropTypes.number,
    columns: PropTypes.number
  }
  render () {
    return (
      <Gridlist
        items={this.props.items}
        cardComponent={<ActivityCard />}
        cellHeight={this.props.cellHeight}
        columns={this.props.columns}/>
    )
  }
}

import ActivityCard from '../activities-card/activities-card'
import GridListTile from '@material-ui/core/GridListTile'
import MaterialGridList from '@material-ui/core/GridList'
import PropTypes from 'prop-types'
import React from 'react'

export default class Gridlist extends React.Component {
  propTypes = {
    items: PropTypes.array,
    cellHeight: PropTypes.number,
    columns: PropTypes.number,
    image: PropTypes.string,
    cardComponent: PropTypes.instanceOf(ActivityCard)
  }
  render () {
    return (
      <MaterialGridList cellHeight={this.props.cellHeight} cols={this.props.columns}>
        {this.props.items.map(item => (
          <GridListTile cols={1} key={item.key}>
            <cardComponent content={item} />
          </GridListTile>
        )
        )}
      </MaterialGridList>
    )
  }
}

import Button from 'glamorous'
import Card from '@material-ui/core/Card'
import CardActions from '@material-ui/core/CardActions'
import CardContent from '@material-ui/core/CardContent'
import PropTypes from 'prop-types'
import React from 'react'
import Typography from '@material-ui/core/Typography'

export default class ActivityCard extends React.Component {
  propTypes = {
    content: PropTypes.object
  }
  render () {
    return (
      <Card>
        <CardContent>
          <img src={this.props.content.imageUri} />
          <Typography>{this.props.content.title}</Typography>
        </CardContent>
        <CardActions>
          <Button>Points</Button>
        </CardActions>
      </Card>
    )
  }
}

1 Ответ

0 голосов
/ 09 октября 2018

Вам необходимо определить propTypes как статическое свойство, поэтому оно должно быть 

static propTypes = {
}

Статические свойства по-прежнему являются предложением этапа 2 ( info ), поэтому вам необходимо использоватьПлагин Babel для преобразования синтаксиса.Плагин transform-class-properties будет обрабатывать этот синтаксис для вас.

Очевидно, что вы можете просто определить свойство класса, если вы не хотите использовать плагин babel.По сути, это то, во что плагин преобразует ваш код. 

export default class ActivityCard extends React.Component {
  ...
}

ActivityCard.propTypes = {
  items: PropTypes.array,
  cellHeight: PropTypes.number,
  columns: PropTypes.number
}

Реактивные документы на самом деле объясняют это в документации для defaultProps, но принцип тот же.

https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values

Если вы используете преобразование Вавила, например свойства класса преобразования, вы также можете объявить defaultProps как статическое свойство в классе компонента React.Этот синтаксис еще не завершен, и для его работы в браузере потребуется этап компиляции.Для получения дополнительной информации см. Предложение полей класса.

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

Клонировать элемент и передать новый объект.к этому 

{React.cloneElement(this.props.cardComponent, content={item})}

Назовите это паскаль.(не уверен, что вы можете сделать это на самой опоре). 

// store it in some variable
const CardComponent = this.props.cardComponent;

// n.b. you might not need to do this if you just pass the prop in with
// the correct casing although i'm not sure this is a sensible approach.
// I think you're saying PascalCasing the prop directly doesn't work?

<CardComponent content={item} />
...