反应嵌套的自定义 propType

Question

我有一个自定义 Todo propType :

    export const TodoPropType = PropTypes.shape({
     title: PropTypes.string.isRequired,
     description: PropTypes.string
   })

我的 collection Todo 是这样的

{
 "Kfd455gdf4gdf" : { // key as uid
    title: "blabla",
    description: "blobloblo"
  },
  "Kf65sd465fsd" : {
     title: "blabla2",
     description: "blobloblo2"
  }
}

我想做一个自定义 propType 来验证 collection 并重用我的 Todo propType

 export const TodosPropType = function(props, propName, componentName) {
  const todos = props[propName]

 // ... valide that an object..

  Object.keys(todos).map((qid) => {

    // valide that the qid is a string

    // reuse my TodoPropType 
  })
}

但是不推荐手动调用 PropType。我收到警告：

Warning: You are manually calling a React.PropTypes validation function for the todos prop on TodoComponement. This is deprecated and will not work in production with the next major versi....

你是怎么处理的？

Answer 1

不幸的是，由于弃用，您需要使用 typeof stringToCheck === 'string' 并手动检查 props.title 是否存在。如果缺少其中任何一项，您将使用 new Error('error goes here')

手动 return 错误

我们的应用程序中有类似的东西，而且永远不必进行自定义验证，为什么你不能做这样的事情。

component.propTypes = {
  todos: PropTypes.objectOf(TodoPropType)   
}

这将告诉组件检查待办事项是否为数组，如果是，则数组的内容应为给定形状，如果有任何不匹配该形状，则会抛出错误。

反应嵌套的自定义 propType

React nested custom propType

reactjs

react-proptypes