reactjs - 如何将 Prop 验证为对象数组？

Question

这是我将 props 作为对象数组传递的组件的一部分:

const data = [
    {
        active: true,
        status: 'Active'
    },
    {
        active: false,
        status: 'Done'
    }
]

<MyComponent myProps={data} /> 

这是我尝试验证 Prop 的组件

import React from 'react'
import { bool, string } from 'prop-types'

const MyComponent = ({ myProps }) => {
    return (
        <div>
            <h1>Hello</h1>
        </div>
    )
}

MyComponent.propTypes = {
    active: bool.isRequired,
    status: string
}

export default MyComponent

我得到的错误是:

The prop active is marked as required in MyComponent, but itsvalue is undefined

Answer 1

你是作为 Prop 传下来的myProps . active和 status是对象形状的一部分。考虑到这一点，您的 propType 应如下所示:

MyComponent.propTypes = {
  myProps: PropTypes.arrayOf(
    PropTypes.shape({
      active: PropTypes.bool.isRequired,
      status: PropTypes.string
    })
  )
}

还记得导入 PropTypes在顶部:

import PropTypes from 'prop-types';