定义子道具的道具类型

Question

我想使用元素子元素的道具并希望验证这些道具。

有可能实现这一点吗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道具，您可以编写一个自定义验证器来执行此操作。来自文档：&nbsp; // You can also specify a custom validator. It should return an Error&nbsp; // object if the validation fails. Don't `console.warn` or throw, as this&nbsp; // won't work inside `oneOfType`.&nbsp; customProp: function(props, propName, componentName) {&nbsp; &nbsp; if (!/matchme/.test(props[propName])) {&nbsp; &nbsp; &nbsp; return new Error(&nbsp; &nbsp; &nbsp; &nbsp; 'Invalid prop `' + propName + '` supplied to' +&nbsp; &nbsp; &nbsp; &nbsp; ' `' + componentName + '`. Validation failed.'&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; },您可以为您的孩子道具做类似的事情（只需替换customProp为children，然后根据需要进行验证。^^ 话虽如此，除非绝对必要，否则我强烈建议不要这样做！该childrenprop 是 React 世界中众所周知且专门设计的 prop。由于 prop-types 实际上只是用于开发人员的健全性检查，因此您最好花几分钟为组件编写可靠的单元测试。我能想到的唯一有效的情况是，如果您提供一个框架并希望为您的消费者提供有用的调试消息。然而，好的文档和示例通常比控制台警告 FWIW 更有效。如果我不明白你的意图，请告诉我。