PropType与ESLint反应
PropType与ESLint反应
提问于 2019-09-18 09:37:25
开始使用ESLint并在PropType中遇到一些问题，目前我有一个道具children，现在假设这个道具是一个string。我得到了一个错误'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的道具的问题。但实际上，这个道具是一个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>
)
}Update (这对我有用)，删除2 PropTypes并添加以下内容：
CartProvider.propTypes = {
children: PropTypes.node.isRequired,
}Stack Overflow用户
发布于 2019-09-18 09:55:52
应该设置defaultProps值，而不是再次使用Proptype
CartProvider.propTypes = {
children: PropTypes.string,
}
CartProvider.defaultProps = {
children: "This is chidlren default string"
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57989644
复制相关文章
相似问题
腾讯云开发者
