首頁猿問定義子道具的道具類型

定義子道具的道具類型

JavaScript

不負(fù)相思意 2023-07-14 16:30:37

我想使用元素子元素的道具并希望驗(yàn)證這些道具。有可能實(shí)現(xiàn)這一點(diǎn)嗎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貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊

簡(jiǎn)短的回答是，是的，但你可能不應(yīng)該。:)

Prop-types 旨在定義組件的契約。有點(diǎn)像靜態(tài)類型為您所做的事情（例如，Typescript）。如果您確實(shí)想驗(yàn)證該children道具，您可以編寫一個(gè)自定義驗(yàn)證器來執(zhí)行此操作。來自文檔：

// 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，然后根據(jù)需要進(jìn)行驗(yàn)證。

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

我能想到的唯一有效的情況是，如果您提供一個(gè)框架并希望為您的消費(fèi)者提供有用的調(diào)試消息。然而，好的文檔和示例通常比控制臺(tái)警告 FWIW 更有效。

如果我不明白你的意圖，請(qǐng)告訴我。

反對(duì) 回復(fù) 2023-07-14