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

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问题相关的问题：

• https://github.com/yannickcr/eslint-plugin-react/issues/237
• https://github.com/yannickcr/eslint-plugin-react/issues/1257
• https://github.com/yannickcr/eslint-plugin-react/issues/1422
• https://github.com/yannickcr/eslint-plugin-react/issues/1447

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

这些中提到的另一个潜在问题是由于this.props的解构，并且解决方法是避免使用以下方法对this.props进行解构：

const props = this.props;

而是选择其中一个：

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

或使用longhand语法选择属性：

this.props.items

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

const myProps = this.props

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