PropTypes получает неопределенные типы в комбо React-DND / Styled-Components - PullRequest
Новая
       37

PropTypes получает неопределенные типы в комбо React-DND / Styled-Components

0 голосов
/ 18 января 2019

Я пытаюсь получить небольшой пример использования react-dnd с styled-components, и это работает! Однако, похоже, он полностью сломал PropTypes.

failed proptypes

Что мне кажется довольно странным. У меня есть несколько рабочих компонентов с каждым, и это работало до введения react-dnd, поэтому я, по меньшей мере, озадачен.

Как уже упоминалось, код работает в браузере, как ожидалось, и console.log отображение реквизитов и их типов показывает, что они действительно присутствуют и имеют допустимый тип.

Вот мой код: 

import React from 'react';
import PropTypes from 'react';
import styled from 'styled-components';

import { DragSource } from 'react-dnd';

class StyleTest extends React.Component {

  constructor(props) {
    super(props);
    console.log(Object.keys(props).map(p => (typeof props[p])));
    // prints ["string", "string", "function"]
  }

  render() {
    const { color, title, connectDragSource } = this.props;

    return (
      <Wrapper color={color}>
        <h1>HUZZAAAAH {title}</h1>
        <Button ref={instance => connectDragSource(instance)}>Make boring</Button>
        <CoolerButton>Make cool</CoolerButton>
      </Wrapper>
    );
  }

}

StyleTest.propTypes = {
  color: PropTypes.string,
  title: PropTypes.string,
  connectDragSource: PropTypes.func
};

export default DragSource(
  'button_drag', 
  {
    beginDrag: () => {
      return {id: 42};
    }
  }, 
  (connect) => ({ 
    connectDragSource: connect.dragSource()
  })
)(StyleTest);

let Wrapper = styled.div`
  height: 200px;
  background-color: peachpuff;

  h1 {
    color: ${props => props.color};
  }
`;

let Button = styled.div`
  width: 200px;

  margin: 5px;
  padding: 5px 10px;

  text-align: center;
  border: 2px solid grey;
`;

let CoolerButton = styled(Button)`
  border-color: orange;
  border-radius: 10px;
`;
...