在React TypeScript中,当我们尝试将道具传递给子组件时,可能会遇到错误TS(2322)。这个错误通常是由于类型不匹配导致的。为了解决这个问题,我们可以采取以下步骤:
React.FC
(函数组件)或React.Component
(类组件)来指定道具的类型。例如,如果我们有一个名为ChildComponent
的子组件,它接受一个名为propName
的字符串道具,我们可以这样定义父组件:import React from 'react';
import ChildComponent from './ChildComponent';
interface ParentProps {
propName: string;
}
const ParentComponent: React.FC<ParentProps> = ({ propName }) => {
return <ChildComponent propName={propName} />;
};
export default ParentComponent;
React.FC
或React.Component
来指定道具的类型。例如,我们可以这样定义子组件:import React from 'react';
interface ChildProps {
propName: string;
}
const ChildComponent: React.FC<ChildProps> = ({ propName }) => {
return <div>{propName}</div>;
};
export default ChildComponent;
import React from 'react';
import ParentComponent from './ParentComponent';
const App: React.FC = () => {
const propName = 'Hello, World!';
return <ParentComponent propName={propName} />;
};
export default App;
通过以上步骤,我们可以更正类型以将道具传递给React TypeScript中的孩子,并避免错误TS(2322)的问题。
领取专属 10元无门槛券
手把手带您无忧上云