我正在嘗試將用戶名和 ID 傳遞到我的支持組件中，如下所示：
<HashRouter>
<nav>
<Link to="/">Home</Link>
|
<Link to="/profile">My Profile</Link>
|
<Link to="/vendor">Vendor Portal</Link>
|
<Link to="/help">Support</Link>
</nav>
<Routes>
<Route exact path="/" element={<App />} />
<Route exact path="/profile" element={<AuthComponent />} />
<Route exact path="/help" element={<Support username={"jim"} id={"weenie"} /> } />
</Routes>
</HashRouter>
并尋求支持：
export class Support extends React.Component {
render() {
console.log(this.props)
return (
<div>
<div>Support</div>
<div>
username?: {this.props.person['username']} <br/>
User id?: {this.props.person.id}
</div>
</div>
)
}
}
Support.propTypes = {
username: PropTypes.string,
id: PropTypes.string
}
我得到白屏死機，不知何故被呼叫了幾次：
props 似乎被傳入了，那么為什么 propTypes 會中斷它？
uj5u.com熱心網友回復：
由于您正在傳遞username并id作為道具：
<Support username={"jim"} id={"weenie"} />
您可以直接以this.props.username和訪問它們this.props.id。
此外，您可以將 JSX 中的字串直接傳遞為<Support username="jim" id="weenie" />
uj5u.com熱心網友回復：
您似乎正在訪問不存在的道具中的“人”屬性，并且在“人”中您再次嘗試讀取“用戶名”，因此錯誤“讀取未定義的屬性用戶名”因為“人”是道具中沒有。
如果你使用“this.props.username”和“this.props.id”，你會很高興
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/515657.html
標籤：反应反应组件