亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

定義子道具的道具類型

定義子道具的道具類型

不負相思意 2023-07-14 16:30:37
我想使用元素子元素的道具并希望驗證這些道具。有可能實現這一點嗎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,  .  .  .}
查看完整描述

1 回答

?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

簡短的回答是,是的,但你可能不應該。:)


Prop-types 旨在定義組件的契約。有點像靜態類型為您所做的事情(例如,Typescript)。如果您確實想驗證該children道具,您可以編寫一個自定義驗證器來執行此操作。來自文檔:


  // 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為children,然后根據需要進行驗證。


^^ 話雖如此,除非絕對必要,否則我強烈建議不要這樣做!該childrenprop 是 React 世界中眾所周知且專門設計的 prop。由于 prop-types 實際上只是用于開發人員的健全性檢查,因此您最好花幾分鐘為組件編寫可靠的單元測試。


我能想到的唯一有效的情況是,如果您提供一個框架并希望為您的消費者提供有用的調試消息。然而,好的文檔和示例通常比控制臺警告 FWIW 更有效。


如果我不明白你的意圖,請告訴我。


查看完整回答
反對 回復 2023-07-14
  • 1 回答
  • 0 關注
  • 127 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號