Question

我有一个简单的无状态组件，如下面的那个（有多个属性，这只是一个演示）：

import PropTypes from 'prop-types'
import React from 'react'

import MyDropdown from '...'

function renderDropdown (props) {
  return props.isOpened && <MyDropdown />
}

const MyComponent = function (props) {
  return (
    <div className='my-component'>
      {renderDropdown(props)}
    </div>
  )
}

MyComponent.propTypes = {
  isOpened: PropTypes.bool
}

MyComponent.defaultProps = {
  isOpened: false
}

export default MyComponent

当我使用estlint验证它时，会抛出许多错误，说道具验证中缺少某些属性，如下所示：

如果我只传递必要的属性，或者如果我将函数移动到渲染内部，它就能完美地运行。

Answer 1

这似乎是与以下ESLint问题相关的问题：

在第一期中，有几个人提到它可能是由一个简单的拼写错误引起的，比如使用PropTypes代替propTypes。我确实在上面的代码中看到了一个拼写错误（MyComponent.propTyps），但是因为它的示例代码我怀疑这是问题所在。

其中提到的另一个潜在问题是由于解构this.props，修复是为了避免使用以下内容对this.props进行解构：

const props = this.props;

而是选择其中一个：

const {items, checked, onCheck} = this.props;

或使用简写语法选择属性：

this.props.items

或将this.props分配给新变量：

const myProps = this.props

但是，它似乎也在https://github.com/yannickcr/eslint-plugin-react/pull/1605中提出了修复，因此您可能只需要在推送修复后等待并更新ESLint。

将整个道具传递给辅助函数会触发eslint prop-type错误

1 个答案: