我如何使這個組件使用function而不是const？
const MyComponent: React.FC = () => {
return <div>My Component</div>;
}
我試過這樣做
function MyComponent (): React.FC {
return <div>My Component</div>;
}
但是，我的編輯器突出顯示了 return 陳述句并給出了這個錯誤：
型別“元素”不可分配給型別“FC<{}>”。型別 'ReactElement<any, any>' 不匹配簽名 '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any> | null'.ts
uj5u.com熱心網友回復：
首先，我建議找出在 JS 中宣告函式的各種方式之間的差異。即您可以將函式宣告為function declarationsor function expressions。
例子：
function myFunction(){
return 'This is a function declaration.';
}
const fun1 = function() {
return 'This is a function expression using a normal function.';
}
const fun = () => {
return 'This is a function expression with an arrow function.';
}
現在，為了回答您的問題，您不能在函式宣告中使用 React.FC，因為在執行以下操作時在函式宣告中：
function fun() : React.FC {
//do something
}
Typescript 以您嘗試指定 fun() 函式的回傳型別的方式對其進行解釋。相反，您想要做的是：
function HomeComponent(): React.ReactNode {
return <h1>Hello, world!</h1>
}
以便 TS 了解此函式將回傳某種型別的 ReactNode。
當你有一個帶有函式宣告的 props 時，你會這樣做：
type Props = {
message: string;
}
function HomeComponent({ message }): React.ReactNode {
return <div>{message}</div>
}
uj5u.com熱心網友回復：
您的編輯器正在突出顯示它，因為您回傳的不是 React 函陣列件，而是 ReactNode。
這應該有幫助：
function MyComponent(): React.ReactNode {
return <div>My Component</div>;
}
uj5u.com熱心網友回復：
實際上，在第一個中，當您看到分配給 const 值的以下代碼時，您回傳一個 Function 組件，因此您應該使用 (React.fn) 來代替它：
(a const value) = ()=>{}
但是在第二個中，您創建了一個回傳 Element 的函式，因此您應該為它使用 (React.ReactElement)。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/369137.html