Reactjs 即使在另一个项目中也会出现奇怪的错误

嗨，我学会了反应，需要帮助

我得到这个错误：

./src/components/圬工/圬工.js
第278:23行：声明的属性类型中的输入错误：布尔反应/无输入错误
第280:26行：声明的属性类型中的输入错误：布尔反应/无输入错误
第282:20行：声明的属性类型中的输入错误：布尔反应/无输入错误

搜索关键字以了解有关每个错误的更多信息

但它在这种情况下工作正常 所有的

PropTypes.boolean

都给出了类似boolean的错误，不能使用 我有搜索，但找不到一些答案，我想这可能是一些版本冲突 请给我一些建议

import React from "react";
import PropTypes from "prop-types";
import { withResizeDetector } from "react-resize-detector";
import VisibilitySensor from "react-visibility-sensor";
import { max, map, compact, last } from "lodash";

class Masonry extends React.Component {
  constructor(props) {
    super(props);
    this.container = React.createRef();
    this.list = React.createRef();
    this.state = {
      mounted: false,
      scrollTop: 0,
      scrollProgress: 0
    };

    this._onEnd = this._onEnd.bind(this);
    this._isVisibleItem = this._isVisibleItem.bind(this);
    this._setContainerHeight = this._setContainerHeight.bind(this);
    this._onResize = this._onResize.bind(this);
    this._onScroll = this._onScroll.bind(this);
  }

  componentDidMount() {
    this.setState({
      mounted: true
    });

    this.container.current.addEventListener("scroll", this._onScroll, false);
  }

  componentWillUnmount() {
    this.container.current.removeEventListener("scroll", this._onScroll, false);
  }

  componentWillReceiveProps(newProps) {
    if (this.props.width !== newProps.width) {
      setTimeout(this._onResize, 0);
    }
  }

  /**
   * Do something when the container is scrolled
   */
  _onScroll() {
    const { scrollTop, scrollHeight } = this.container.current;

    this.setState({
      scrollTop,
      scrollProgress: (1 / scrollHeight) * scrollTop
    });
  }

  /**
   * Approximate previous scroll-position after container was resized
   */
  _onResize() {
    const { scrollProgress } = this.state;
    let container = this.container.current;

    container.scrollTop = scrollProgress * container.scrollHeight;
  }

  /**
   *  Let parent components know that we reached the end of display
   */
  _onEnd(isVisible) {
    if (!isVisible) return;
    this.props.onEnd && this.props.onEnd();
  }

  _getContainerStyle() {
    const { infinite, debug } = this.props;

    const infiniteStyles = infinite
      ? {
          position: "absolute",
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          overflow: "auto"
        }
      : {};

    return {
      outline: debug && "1px solid seagreen",
      width: "100%",
      position: "relative",
      ...infiniteStyles
    };
  }

  _getListStyle() {
    const { gutter } = this.props;
    return {
      padding: 0,
      margin: 0,
      listStyle: "none"
    };
  }

  _getListItemStyle(index, item) {
    const position = {
      padding: 0,
      margin: 0,
      position: "absolute",
      ...this._getItemDimensions(index, item)
    };

    return position;
  }

  // Picks the column in which to put the element
  // and returns its index
  _pickColumn() {
    const columnHeights = this.columns.map(items => {
      let lastItem = items[items.length - 1];
      return lastItem ? lastItem.height + lastItem.top : 0;
    });

    const columnIndex = columnHeights.indexOf(Math.min(...columnHeights));
    return columnIndex;
  }

  _getWidth() {
    const { gutter, outerGutter } = this.props;
    const colcount = this._getColumnCount();
    const containerWidth =
      this.container.current.offsetWidth -
      (colcount - 1) * gutter -
      (outerGutter ? 2 * gutter : 0);

    return Math.floor(containerWidth / colcount);
  }

  _getDimensions({ item }) {
    const { gutter, extraPx = 0 } = this.props;
    const width = this._getWidth();
    const height = Math.floor(width * item.ratio) + extraPx;
    return {
      width,
      height
    };
  }

  _getLeft({ columnIndex }) {
    const { gutter, outerGutter } = this.props;
    return (
      columnIndex * this._getWidth() +
      columnIndex * gutter +
      (outerGutter ? gutter : 0)
    );
  }

  _getTop({ columnIndex }) {
    const { outerGutter, gutter } = this.props;
    const items = this.columns[columnIndex];
    return items && items.length
      ? last(items).top + last(items).height + gutter
      : outerGutter
        ? gutter
        : 0;
  }

  _getItemDimensions(index, item) {
    const columnIndex = this._pickColumn();
    const { debug } = this.props;

    const dimensions = {
      outline: debug && "1px solid tomato",
      top: this._getTop({ columnIndex }),
      left: this._getLeft({ columnIndex }),
      ...this._getDimensions({ item, columnIndex })
    };

    this.columns[columnIndex] = [...this.columns[columnIndex], dimensions];

    return dimensions;
  }

  _isVisibleItem({ top, left, width, height }) {
    const { scrollTop } = this.state;
    const { offsetHeight, offsetWidth } = this.container.current;
    const { safeSpace = offsetHeight / 2 } = this.props;

    const topVisible = top >= scrollTop - height - safeSpace;
    const bottomVisible = top <= scrollTop + offsetHeight + safeSpace;

    return topVisible && bottomVisible;
  }

  _setContainerHeight() {
    const el = this.list.current;

    const lastItems = this.columns.map(items => {
      let item = items[items.length - 1];
      return item.top + item.height;
    });

    el.style.height = max(lastItems) + "px";
  }

  renderItem({ index, item, maxIndex }) {
    const { items = [], itemRenderer } = this.props;
    const Component = itemRenderer;

    const style = this._getListItemStyle(index, item);

    const isVisible = this._isVisibleItem(style);

    if (index + 1 === maxIndex) {
      this._setContainerHeight();
    }

    return isVisible ? (
      <li key={item.id} style={style}>
        <Component {...item} />
        {items.length === index + 1 && (
          <div
            style={{
              position: "absolute",
              top: -this.container.current.offsetHeight / 2,
              width: 1,
              height: 1
            }}
          >
            <VisibilitySensor partialVisibility={true} onChange={this._onEnd} />
          </div>
        )}
      </li>
    ) : null;
  }

  _getColumnCount() {
    const { cols, width } = this.props;
    const mqs = compact(
      map(cols, (columnCount, key) => {
        const applies = this.container.current.offsetWidth >= key;
        return applies ? columnCount : false;
      })
    );

    const colcount = last(mqs);

    return colcount;
  }

  render() {
    const { mounted } = this.state;
    const { items = [] } = this.props;

    if (mounted) {
      this.columns = new Array(this._getColumnCount()).fill([]);
    }

    const maxIndex = items.length;

    return (
      <div style={this._getContainerStyle()} ref={this.container}>
        <ul ref={this.list} style={this._getListStyle()}>
          {mounted &&
            items.map((item, index) =>
              this.renderItem({ index, item, maxIndex })
            )}
        </ul>
      </div>
    );
  }
}

Masonry.propTypes = {
  columns: PropTypes.number.isRequired,
  safeSpace: PropTypes.number,
  items: PropTypes.array.isRequired,
  itemRenderer: PropTypes.func.isRequired,
  infinite: PropTypes.boolean, ERROR............
  gutter: PropTypes.number,
  outerGutter: PropTypes.boolean, ERROR............
  extraPx: PropTypes.number,
  debug: PropTypes.boolean ERROR............
};

export default withResizeDetector(Masonry);

从“React”导入React；
从“道具类型”导入道具类型；
从“react resize detector”导入{withResizeDetector}；
从“反应可见性传感器”导入可见性传感器；
从“lodash”导入{max，map，compact，last}；
类。组件{
建造师（道具）{
超级（道具）；
this.container=React.createRef（）；
this.list=React.createRef（）；
此.state={
错,，
滚动顶端：0，
滚动进度：0
};
this.\u onEnd=this.\u onEnd.bind（this）；
this.\u isVisibleItem=this.\u isVisibleItem.bind（this）；
this.\u setContainerHeight=this.\u setContainerHeight.bind（this）；
this.\u onResize=this.\u onResize.bind（this）；
this.\u onScroll=this.\u onScroll.bind（this）；
}
componentDidMount（）{
这是我的国家({
是的
});
this.container.current.addEventListener（“滚动”，this.\u onScroll，false）；
}
组件将卸载（）{
this.container.current.removeEventListener（“滚动”，this.\u onScroll，false）；
}
组件将接收道具（新道具）{
if（this.props.width！==newProps.width）{
setTimeout（此值为0）；
}
}
/**
*在滚动容器时执行某些操作
*/
_onScroll（）{
const{scrollTop，scrollHeight}=this.container.current；
这是我的国家({
滚动顶，
滚动进度：（1/滚动高度）*滚动顶部
});
}
/**
*调整容器大小后上一个滚动位置的近似值
*/
_onResize（）{
const{scrollProgress}=this.state；
让container=this.container.current；
container.scrollTop=scrollProgress*container.scrollHeight；
}
/**
*让父组件知道我们已到达显示的末尾
*/
_ONED（可见）{
如果（！isVisible）返回；
this.props.oned&&this.props.oned（）；
}
_getContainerStyle（）{
const{infinite，debug}=this.props；
常数无穷大=无穷大
? {
位置：“绝对”，
排名：0，
左:0,，
右:0,，
底部：0，
溢出：“自动”
}
: {};
返回{
大纲：调试和“1px实心海绿”，
宽度：“100%”，
职位：“相对”，
…无穷大
};
}
_getListStyle（）{
const{gutter}=this.props；
返回{
填充：0，
保证金：0，
列表样式：“无”
};
}
_getListItemStyle（索引，项）{
常数位置={
填充：0，
保证金：0，
位置：“绝对”，
…此项。\u getItemDimensions（索引，项）
};
返回位置；
}
//拾取要在其中放置元素的列
//并返回其索引
_选取柱（）{
const columnHeights=this.columns.map（items=>{
设lastItem=items[items.length-1]；
返回lastItem？lastItem.height+lastItem.top:0；
});
const columnIndex=columnHeights.indexOf（Math.min（…columnHeights））；
返回列索引；
}
_getWidth（）{
const{gutter，outerGutter}=this.props；
const colcount=this.\u getColumnCount（）；
集装箱宽度常数=
this.container.current.offsetWidth-
（colcount-1）*排水沟-
（外部排水沟？2*排水沟：0）；
返回数学楼层（集装箱宽度/列数）；
}
_getDimensions（{item}）{
const{gotter，extraPx=0}=this.props；
const width=this._getWidth（）；
常数高度=数学地板（宽度*项目比率）+额外的Px；
返回{
宽度，
高度
};
}
_getLeft（{columnIndex}）{
const{gutter，outerGutter}=this.props；
返回(
columnIndex*这个。_getWidth（）+
列索引*边沟+
（outerGutter？排水沟：0）
);
}
_getTop（{columnIndex}）{
const{outerGutter，gutter}=this.props；
const items=this.columns[columnIndex]；
返回项目（&items.length）
最后一个（项目）。顶部+最后一个（项目）。高度+排水沟
：outerGutter
？排水沟
: 0;
}
_getItemDimensions（索引，项）{
const columnIndex=this.\u pickColumn（）；
const{debug}=this.props；
常量维度={
大纲：调试和“1px实心番茄”，
顶部：this._getTop（{columnIndex}），
左：this.\u getLeft（{columnIndex}），
…此._getDimensions（{item，columnIndex}）
};
this.columns[columnIndex]=[…this.columns[columnIndex]，维度]；
返回维度；
}
_isVisibleItem（{顶部，左侧，宽度，高度}）{
const{scrollTop}=this.state；
const{offsetHeight，offsetWidth}=this.container.current；
const{safeSpace=offsetHeight/2}=this.props；
const topVisible=top>=滚动顶部-高度-安全空间；
const bottomVisible=顶部{
设item=items[items.length-1]；
返回item.top+item.height；
});
el.style.height=最大（最新项）+“px”；
}
renderItem（{index，item，maxIndex}）{
常量{items=[]，itemrender}=this.props；
const Component=itemRenderer；
const style=this.\u getListItemStyle（索引，项）；
const isVisible=此项。\u isVisibleItem（样式）；
如果（索引+1==最大索引）{
这个；
}
返回是否可见(

{items.length==索引+1&&(
)}

)：null；
}
_getC
{
  "name": "test-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.19.2",
    "lodash": "^4.17.19",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-motion": "^0.5.2",
    "react-resize-detector": "^5.0.7",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.0",
    "react-slick": "^0.27.3",
    "react-tilt": "^0.1.4",
    "react-transition-group": "^4.4.1",
    "react-visibility-sensor": "^5.1.1",
    "save": "^2.4.0",
    "slick-carousel": "^1.8.1"
  },
  "scripts": {
    "start": "set PORT=3038&& react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "gh-pages": "^2.0.1"
  }
}