英文:
How to describe the type of props when they are partially used in the React component
问题
我的React组件获取props并使用from部分。还将它们传递到另一个子组件中。
<MyComponent prop1="string" prop2="string" prop3="string" prop4="string" /> [3]
type PropsType = {
prop1: string;
prop2: string;
prop3: string; [1]
prop4: string;[2]
}
function MyComponent(props: PropsType) {
const { prop1, prop2 } = props;
return (
<ChildComponent {...props}>
)
}
}
type ChildComponentPropTypes = {
prop3: string;
prop4: string;
}
function ChildComponent(props: ChildComponentPropTypes) {
const { prop3, prop4 } = props;
return (something)
}
我收到了一个TypeScript错误：
'props3, props4' PropType已定义，但prop从未被使用eslintreact/no-unused-prop-types
请告诉我如何消除这个错误
也许您可以决定更改代码的架构来解决问题。但我不想这样做。
如果省略[1]和[2]，我们会在[3]中收到错误：在"IntrinsicAttributes & PropsType"类型中不存在"prop3, prop4"属性。
英文:
My React component gets props and uses the from part. And also throws them further into another child component
<MyComponent prop1="string" prop2="string" prop3="string" prop4="string" /> [3]
type PropsType = {
prop1: string;
prop2: string;
prop3: string; [1]
prop4: string;[2]
}
function MyComponent(props: PropsType) {
const{prop1, prop2} = props;
return(
<ChildComponent {...props}>
)
}
type ChildComponentPropTypes = {
prop3: string;
prop4: string;
}
function ChildComponent(props: ChildComponentPropTypes){
const {prop3, prop4} = props;
return(something)
}
I get a typescript error:
'props3, props4' PropType is defined but prop is never usedeslintreact/no-unused-prop-types
Please tell me how to get rid of this error
Perhaps you can decide to change the architecture of the code to solve the problem. But I would not like to do that.
if [1] and [2] are omitted, we get an error in [3]: The "prop3, prop4" property does not exist in the "IntrinsicAttributes & PropsType" type
答案1
得分: 1
以下是翻译好的部分：
"Your eslint react/no-unused-prop-types rule producing the error, not Typescript. Try disabling the rule in your eslint config or adding a eslint-disable-next-line comment.
function MyComponent(props: PropsType) {
const{prop1, prop2} = props;
return(
// eslint-disable-next-line react/no-unused-prop-types
<ChildComponent {...props}>
)
}
```"
<details>
<summary>英文:</summary>
It is your eslint [react/no-unused-prop-types](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md) rule producing the error, not Typescript. Try disabling the rule in your eslint config or adding a `eslint-disable-next-line` comment.
```tsx
function MyComponent(props: PropsType) {
const{prop1, prop2} = props;
return(
// eslint-disable-next-line react/no-unused-prop-types
<ChildComponent {...props}>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论