解決React報(bào)錯(cuò)Parameter 'props' implicitly has an 'any' type
總覽
當(dāng)我們沒(méi)有為函數(shù)組件或者類(lèi)組件的props聲明類(lèi)型，或忘記為React安裝類(lèi)型聲明文件時(shí)，會(huì)產(chǎn)生"Parameter 'props' implicitly has an 'any' type"錯(cuò)誤。為了解決這個(gè)錯(cuò)誤，在你的組件中明確地為props對(duì)象設(shè)置一個(gè)類(lèi)型。
安裝類(lèi)型文件
你首先要確定的是你已經(jīng)安裝了React類(lèi)型聲明文件。在項(xiàng)目的根目錄下打開(kāi)終端，并運(yùn)行以下命令。
# ??? with NPM npm install --save-dev @types/react @types/react-dom # ---------------------------------------------- # ??? with YARN yarn add @types/react @types/react-dom --dev
嘗試重啟你的IDE和開(kāi)發(fā)服務(wù)。
聲明類(lèi)型
如果這沒(méi)有幫助，你有可能忘記明確地為函數(shù)組件或類(lèi)組件的props聲明類(lèi)型。
// 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;
上述代碼片段的問(wèn)題在于，我們沒(méi)有為函數(shù)組件的props設(shè)置類(lèi)型。
為了解決該錯(cuò)誤，我們必須顯示地props參數(shù)類(lèi)型。
// 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顯示地聲明了一個(gè)接口，這就可以解決錯(cuò)誤。
我們不需要設(shè)置children屬性，但如果你向你的組件傳遞children，你就必須這樣做。
如果你不想為你的組件明確地聲明props對(duì)象類(lèi)型，那么你可以使用any類(lèi)型。
// 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類(lèi)型有效地關(guān)閉了類(lèi)型檢查，所以我們能夠向組件傳遞props，并訪問(wèn)對(duì)象上的屬性，而不會(huì)得到任何類(lèi)型檢查錯(cuò)誤。
泛型
如果你有一個(gè)類(lèi)組件，可以使用泛型來(lái)為其props和state聲明類(lèi)型。
// 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提供了類(lèi)型，這就解決了這個(gè)錯(cuò)誤。
如果你不想明確地為你的組件的props和state提供類(lèi)型，你可以使用any類(lèi)型。
// 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;
我們?cè)谳斎?code>props和state對(duì)象時(shí)使用了any類(lèi)型，這有效地關(guān)閉了類(lèi)型檢查。
現(xiàn)在你將能夠訪問(wèn)this.props和this.state對(duì)象上的任何屬性而不會(huì)得到類(lèi)型檢查錯(cuò)誤。
重新安裝
如果錯(cuò)誤沒(méi)有解決，嘗試刪除你的node_modules和package-lock.json（不是package.json）文件，重新運(yùn)行npm install并重新啟動(dòng)你的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
如果錯(cuò)誤仍然存在，請(qǐng)確保重新啟動(dòng)你的IDE和開(kāi)發(fā)服務(wù)。VSCode經(jīng)常出現(xiàn)故障，重啟有時(shí)會(huì)解決問(wèn)題。
翻譯原文鏈接：bobbyhadz.com/blog/react-…
以上就是解決React報(bào)錯(cuò)Parameter 'props' implicitly has an 'any' type的詳細(xì)內(nèi)容，更多關(guān)于React 報(bào)錯(cuò)解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒(méi)有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫(kù),本文給大家介紹React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程,感興趣的朋友跟隨小編一起看看吧2024-06-06
React.js組件實(shí)現(xiàn)拖拽排序組件功能過(guò)程解析
這篇文章主要介紹了React.js組件實(shí)現(xiàn)拖拽排序組件功能過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
React中hook函數(shù)與useState及useEffect的使用
這篇文章主要介紹了React中hook函數(shù)與useState及useEffect的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10
詳解React Native 采用Fetch方式發(fā)送跨域POST請(qǐng)求
這篇文章主要介紹了詳解React Native 采用Fetch方式發(fā)送跨域POST請(qǐng)求，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
React的createElement和render手寫(xiě)實(shí)現(xiàn)示例
這篇文章主要為大家介紹了React的createElement和render手寫(xiě)實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
一起來(lái)學(xué)習(xí)React元素的創(chuàng)建和渲染
這篇文章主要為大家詳細(xì)介紹了React元素的創(chuàng)建和渲染，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助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異步刷新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React?中的事件，是對(duì)原生事件的封裝，叫做合成事件。抽象出一層合成事件，是為了做兼容，抹平不同瀏覽器之間的差異。本文將從事件綁定和事件觸發(fā)角度，帶大家解讀下源碼，感興趣的可以了解一下2022-12-12
一文教你如何避免React中常見(jiàn)的8個(gè)錯(cuò)誤
這篇文章主要來(lái)和大家一起分享在?React?開(kāi)發(fā)中常見(jiàn)的一些錯(cuò)誤,以及如何避免這些錯(cuò)誤,理解這些問(wèn)題背后的細(xì)節(jié),防止犯下類(lèi)似的錯(cuò)誤,需要的可以參考下2023-12-12