为 child 的道具定义道具类型

Question

我想使用元素的 children 的道具，并想验证这些道具。

是否可以通过 prop-types 实现此目的？

export default function MyComponent(props) {

  return (
      <div>
        {React.Children.map(props.children, (c, i) => {
          // Want to do something with validated c.props.somePropThatNeedValidation (if exists of course)
          // c Is not an element that I wrote so I can't validate it there
          {React.cloneElement(c, {extras})}
        }
        )}
      </div>
  )
}


MyComponent.propTypes = {
  children: PropTypes.node,
  .
  .
  .
}

Answer 1

简短回答，是的，但您可能不应该这样做。 :)

Prop-types 用于定义组件的契约。有点像静态类型为你做的事情（例如，Typescript）。如果你真的想验证 children 道具，你可以编写一个自定义验证器来这样做。来自 the docs:

  // You can also specify a custom validator. It should return an Error
  // object if the validation fails. Don't `console.warn` or throw, as this
  // won't work inside `oneOfType`.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

您可以为您的 children 道具做类似的事情（只需将 customProp 替换为 children，然后根据需要进行验证。

^^ 话虽这么说，但我强烈建议不要这样做，除非绝对必要！ children 道具是一个 well-known 并且在 React 世界中有特殊用途的道具。由于 prop-types 实际上只是用于开发 sanity-checking 无论如何，您最好花几分钟时间为您的组件编写可靠的单元测试。

我能想到的唯一有效情况是，如果您正在提供一个框架并希望为您的消费者提供有用的调试消息。但是，好的文档和示例通常比控制台警告 FWIW 更有效。

如果我不明白你的意图，请告诉我。

为 child 的道具定义道具类型

Define proptypes for child's props

javascript

dictionary

children

reactjs

react-proptypes