[英]React PropType with ESLint
开始使用ESLint并遇到PropType问题,目前我有一个prop children
,现在让我们说这个prop是string
。 我'children' is missing in props validationeslint(react/prop-types)
PropTypes
'children' is missing in props validationeslint(react/prop-types)
遇到错误'children' is missing in props validationeslint(react/prop-types)
的错误,为了解决这个问题,我只使用了PropTypes
如下所示:
CartProvider.propTypes = {
children: PropTypes.string,
}
上面解决了这个问题,然后我又遇到了另一个问题propType "children" is not required, but has no corresponding defaultProps declaration.eslint(react/require-default-props)
因此,为了解决这个问题,我添加了另一个PropType,如下所示:
CartProvider.defaultProps = {
children: PropTypes.string,
}
所以我的理解是,每次使用道具时,都需要使用propType
和defaultProps
。 好的,这可以解决基于string
的prop的问题。 但是实际上这个道具是一个array
,然后有了array
我遇到了其他问题Prop type
数组is forbiddeneslint(react/forbid-prop-types)
。
请帮助我了解ESLint为什么将这些道具标记为错误,我知道如何禁用它,但是我想了解为什么会发生它,然后编写更好的代码。
这是一个示例项目:
CartContext
import React from 'react'
import PropTypes from 'prop-types'
export const CartContext = React.createContext(null)
export const CartProvider = ({ children }) => {
const [cartTotal, setCartTotal] = React.useState(0)
const incrementCartTotal = () => setCartTotal(cartTotal + 1)
return (
<CartContext.Provider
value={{
cartTotal,
incrementCartTotal,
}}
>
{children}
</CartContext.Provider>
)
}
CartProvider.propTypes = {
children: PropTypes.string,
}
CartProvider.defaultProps = {
children: PropTypes.string,
}
应用
import React from 'react'
import { CartContext, CartProvider } from './CartContext'
function CartTotalItems() {
const { cartTotal } = React.useContext(CartContext)
return (
<p>
Total items currently in cart:
{cartTotal}
</p>
)
}
function AddToCart() {
const { incrementCartTotal } = React.useContext(CartContext)
return (
<button type="button" onClick={incrementCartTotal}>
Add to cart
</button>
)
}
export default function App() {
return (
<CartProvider>
<CartTotalItems />
<AddToCart />
</CartProvider>
)
}
更新这对我有用,删除2个PropTypes并添加以下内容:
CartProvider.propTypes = {
children: PropTypes.node.isRequired,
}
您弄错的类型children
和混淆使用的defaultProps
:
// Use for initial value
CartProvider.defaultProps = {
counter: 10,
/*
You declared the initial value to be the value of `PropTypes.string`
children: PropTypes.string
*/
}
// Children are always an Array of `ReactElement`/ `ReactElement` node.
CartProvider.propTypes = {
counter: PropTypes.number,
children: PropTypes.node.isRequired,
/* Same
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
*/
/*
props.children can't be a string.
children: PropTypes.string,
*/
}
应该为defaultProps设置一个值,而不是再次使用Proptypes
CartProvider.propTypes = {
children: PropTypes.string,
}
CartProvider.defaultProps = {
children: "This is chidlren default string"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.