解決React報錯Parameter 'props' implicitly has an 'any' type
總覽
當(dāng)我們沒有為函數(shù)組件或者類組件的props聲明類型，或忘記為React安裝類型聲明文件時，會產(chǎn)生"Parameter 'props' implicitly has an 'any' type"錯誤。為了解決這個錯誤，在你的組件中明確地為props對象設(shè)置一個類型。
安裝類型文件
你首先要確定的是你已經(jīng)安裝了React類型聲明文件。在項(xiàng)目的根目錄下打開終端，并運(yùn)行以下命令。
# ??? with NPM npm install --save-dev @types/react @types/react-dom # ---------------------------------------------- # ??? with YARN yarn add @types/react @types/react-dom --dev
嘗試重啟你的IDE和開發(fā)服務(wù)。
聲明類型
如果這沒有幫助，你有可能忘記明確地為函數(shù)組件或類組件的props聲明類型。
// App.tsx
// ?? Parameter 'props' implicitly has an 'any' type.ts(7006)
function Person(props) {
return (
<div>
<h2>{props.name}</h2>
<h2>{props.age}</h2>
<h2>{props.country}</h2>
</div>
);
}
function App() {
return (
<div>
<Person name="James" age={30} country="Australia" />
</div>
);
}
export default App;
上述代碼片段的問題在于，我們沒有為函數(shù)組件的props設(shè)置類型。
為了解決該錯誤，我們必須顯示地props參數(shù)類型。
// App.tsx
interface PersonProps {
name: string;
age: number;
country: string;
children?: React.ReactNode; // ??? for demo purposes
}
function Person(props: PersonProps) {
return (
<div>
<h2>{props.name}</h2>
<h2>{props.age}</h2>
<h2>{props.country}</h2>
</div>
);
}
function App() {
return (
<div>
<Person name="James" age={30} country="Australia" />
</div>
);
}
export default App;
我們?yōu)榻M件的props顯示地聲明了一個接口，這就可以解決錯誤。
我們不需要設(shè)置children屬性，但如果你向你的組件傳遞children，你就必須這樣做。
如果你不想為你的組件明確地聲明props對象類型，那么你可以使用any類型。
// App.tsx
// ??? set type to any
function Person(props: any) {
return (
<div>
<h2>{props.name}</h2>
<h2>{props.age}</h2>
<h2>{props.country}</h2>
</div>
);
}
function App() {
return (
<div>
<Person name="James" age={30} country="Australia" />
</div>
);
}
export default App;
any類型有效地關(guān)閉了類型檢查，所以我們能夠向組件傳遞props，并訪問對象上的屬性，而不會得到任何類型檢查錯誤。
泛型
如果你有一個類組件，可以使用泛型來為其props和state聲明類型。
// App.tsx
import React from 'react';
interface PersonProps {
name: string;
age: number;
country: string;
children?: React.ReactNode;
}
interface PersonState {
value: string;
}
// ??? React.Component<PropsType, StateType>
class Person extends React.Component<PersonProps, PersonState> {
render() {
return (
<div>
<h2>{this.props.name}</h2>
<h2>{this.props.age}</h2>
<h2>{this.props.country}</h2>
</div>
);
}
}
export default function App() {
return (
<div>
<Person name="James" age={30} country="Australia" />
</div>
);
}
我們明確地為組件的props和state提供了類型，這就解決了這個錯誤。
如果你不想明確地為你的組件的props和state提供類型，你可以使用any類型。
// App.tsx
import React from 'react';
// ??? type checking disabled for props and state
class App extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {value: ''};
}
handleChange = (event: any) => {
this.setState({value: event.target.value});
};
render() {
return (
<div>
<form>
<input
onChange={this.handleChange}
type="text"
value={this.state.value}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;
我們在輸入props和state對象時使用了any類型，這有效地關(guān)閉了類型檢查。
現(xiàn)在你將能夠訪問this.props和this.state對象上的任何屬性而不會得到類型檢查錯誤。
重新安裝
如果錯誤沒有解決，嘗試刪除你的node_modules和package-lock.json（不是package.json）文件，重新運(yùn)行npm install并重新啟動你的IDE。
# ??? delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # ??? clean npm cache npm cache clean --force npm install
如果錯誤仍然存在，請確保重新啟動你的IDE和開發(fā)服務(wù)。VSCode經(jīng)常出現(xiàn)故障，重啟有時會解決問題。
翻譯原文鏈接：bobbyhadz.com/blog/react-…
以上就是解決React報錯Parameter 'props' implicitly has an 'any' type的詳細(xì)內(nèi)容，更多關(guān)于React 報錯解決的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React Native 集成 ArcGIS 地圖的詳細(xì)過程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫,本文給大家介紹React Native 集成 ArcGIS 地圖的詳細(xì)過程,感興趣的朋友跟隨小編一起看看吧2024-06-06
React.js組件實(shí)現(xiàn)拖拽排序組件功能過程解析
這篇文章主要介紹了React.js組件實(shí)現(xiàn)拖拽排序組件功能過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04
React中hook函數(shù)與useState及useEffect的使用
這篇文章主要介紹了React中hook函數(shù)與useState及useEffect的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
詳解React Native 采用Fetch方式發(fā)送跨域POST請求
這篇文章主要介紹了詳解React Native 采用Fetch方式發(fā)送跨域POST請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
React的createElement和render手寫實(shí)現(xiàn)示例
這篇文章主要為大家介紹了React的createElement和render手寫實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
一起來學(xué)習(xí)React元素的創(chuàng)建和渲染
這篇文章主要為大家詳細(xì)介紹了React元素的創(chuàng)建和渲染，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
React學(xué)習(xí)之受控組件與數(shù)據(jù)共享實(shí)例分析
這篇文章主要介紹了React學(xué)習(xí)之受控組件與數(shù)據(jù)共享,結(jié)合實(shí)例形式分析了React受控組件與組件間數(shù)據(jù)共享相關(guān)原理與使用技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了React之使用useState異步刷新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
React?中的事件，是對原生事件的封裝，叫做合成事件。抽象出一層合成事件，是為了做兼容，抹平不同瀏覽器之間的差異。本文將從事件綁定和事件觸發(fā)角度，帶大家解讀下源碼，感興趣的可以了解一下2022-12-12
這篇文章主要來和大家一起分享在?React?開發(fā)中常見的一些錯誤,以及如何避免這些錯誤,理解這些問題背后的細(xì)節(jié),防止犯下類似的錯誤,需要的可以參考下2023-12-12