Question

我目前使用两个导出语句设置了Redux连接的React组件，以便更轻松地对组件进行浅层测试。我刚刚开始实现propTypes，并且遇到Redux连接组件的问题。

以下是其中一个示例：

export class SecondaryHeader extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { detail, toggleDetail, survivorsActive } = this.props

    return (
      <div className="secondary-header">
        <div className="container-fluid">
          <div className="row">

            <FontAdjust />
            <ColumnTwo detail={detail} survivorsActive={survivorsActive} />
            <ColumnThree detail={detail} toggleDetail={toggleDetail} />

          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    detail: state.detail,
    survivorsActive: state.journey.survivorsActive
  }
}

SecondaryHeader.propTypes = {
  detail: PropTypes.boolean,
  toggleDetail: PropTypes.func,
  survivorsActive: PropTypes.boolean
}

export default connect(mapStateToProps, actions)(SecondaryHeader)

我在控制台中遇到的错误对于所有propTypes都是这样的：

prop type `detail` is invalid; it must be a function

有没有人知道让propTypes与此设置一起使用的非强化方法？如果我必须改变它，那就这样吧，但我更喜欢一些不会改变我的东西的东西。

Answer 1

PropTypes.boolean是问题所在。试试PropTypes.bool

Answer 2

这些是一些PropTypes，基于文档：

PropTypes.array,
PropTypes.bool,
PropTypes.func,
PropTypes.number,
PropTypes.object,
PropTypes.string,
PropTypes.symbol,
...

和PropTypes.boolean不是其中之一。在此处阅读更多内容：https://reactjs.org/docs/typechecking-with-proptypes.html

将PropType与Redux组件一起使用

2 个答案: