使用 propTypes 进行 React 解构

Question

我在尝试使用 propTypes 进行验证时遇到了一些问题：

class MediaBrowse extends React.Component {
  render() {
    const { name, age, array } = this.props.data;
    return (<div></div>)
  }
}

我将 propTypes 验证为：

MediaBrowse.PropTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  array: PropTypes.array
};

但是它说当我运行 eslint 验证时 data.name 在 props 验证中缺失。所有人都一样..

从父组件我传递了类似的数据谁能帮忙解决这个问题？

Answer 1

import PropTypes from 'prop-types'

MediaBrowse.propTypes ={
      data: PropTypes.shape({
        name: PropTypes.string,
        age: PropTypes.number,
        array: PropTypes.array,
     })
    }

Answer 2

const { name, age, array} = this.props.data

您没有在任何地方定义 props.data，所以它是 undefined。

将MediaBrowse.PropTypes改为MediaBrowse.propTypes（小写"p"）：

MediaBrowse.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  array: PropTypes.array,
}

当您定义道具时，它们可以在 props 对象中访问，如下所示：

const { name, age, array } = this.props

更新：

您的函数可以用 propTypes 定义，如下所示：

MediaBrowse.propTypes = {
  // add this to your existing propTypes
  onSearchText: PropTypes.func,
}

如果你想定义一个默认函数，你可以这样定义它：

MediaBrowse.defaultProps = {
  // define the params and return type of your function here
  // I have just used this as an example
  onSearchText: () => void
}

使用 propTypes 进行 React 解构

React Destructuring with propTypes

reactjs

react-proptypes