代码之家  ›  专栏  ›  技术社区  ›  SomoKRoceS

定义儿童道具的道具类型

  •  0
  • SomoKRoceS  · 技术社区  · 5 年前

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

    是否有可能通过以下方式实现这一点 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,
      .
      .
      .
    }
    
    0 回复  |  直到 5 年前
        1
  •  1
  •   jack.benson    5 年前

    简短的回答,是的,但你可能不应该。:)

    Prop类型旨在定义组件的契约。有点像静态类型为你做的事情(例如,Typescript)。如果你真的想验证 children prop你可以编写一个自定义验证器来实现这一点 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.'
          );
        }
      },
    

    你可以为你的孩子做类似的事情(只需更换 customProp 具有 儿童 然后根据需要进行验证。

    ^^话虽如此,我强烈建议不要这样做,除非 绝对必要 ! 这个 儿童 prop是React世界中众所周知的、专门设计的prop。因为prop类型实际上只是用于开发健全性检查,所以你最好花几分钟时间为你的组件编写一个可靠的单元测试。

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

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