[英]how pass the props from one component to another in react-ionic
I am passing the props from Login component to the StoreView component.我将道具从Login组件传递到StoreView组件。 when I am passing the props then getting a typescript error.当我通过道具时,出现 typescript 错误。
TypeScript error : Type '{ data: Dispatch>; TypeScript 错误:类型'{数据:调度>; }' is not assignable to type 'IntrinsicAttributes'. }' 不可分配给类型“IntrinsicAttributes”。 Property 'data' does not exist on type 'IntrinsicAttributes'.类型“IntrinsicAttributes”上不存在属性“数据”。
my Login component我的登录组件
import React, { useState } from "react";
//more imports
const Login: React.FC = () => {
//some states
const [storeData, setStoreData] = useState([]);
const loginUser = (event: any) => {
event.preventDefault();
const loginApi = LoginAPI.userLogin(userEmail, password);
loginApi
.then((res) => {
if (res) {
setStoreData(res.store_id)
}
else {
alert('invalid user')
}
})
};
return (
<IonPage>
<IonContent>
<div className="login-container">
<div className="login-form-wrapper">
Login please
<form className="login-form" onSubmit={loginUser}>
//my form data
</form>
</div>
</div>
</IonContent>
<StoreView
//here i am getting error
data = {setStoreData}
/>
</IonPage>
);
};
export default Login;
I wanted to pass my props to the StoreView component but getting error in Login component.我想将我的道具传递给StoreView组件,但在登录组件中出现错误。
my StoreView component.我的StoreView组件。
import React, { useEffect, useState } from 'react';
//more imports
const StoreView: React.FC = () => {
return (
<IonContent>
//here i want to my props data
</IonContent>
);
}
export default StoreView;
You have to define props type for the StoreView component.您必须为 StoreView 组件定义道具类型。
type Props = {
// do not use `any`, I don't know the structure of your data
// you should create an interface suitable for the type of data you want
data: any[];
}
const StoreView = ({ data }: Props) => {
return (
<IonContent>
// do something with data
</IonContent>
);
}
Then you can use it like in your example (but you should probably pass storeData
there, not setStoreData
).然后你可以像在你的例子中一样使用它(但你可能应该在那里传递storeData
,而不是setStoreData
)。
For this small example i would suggest using React.Context to manage state between the two components.对于这个小例子,我建议使用 React.Context 来管理两个组件之间的 state。
Here is a blog post using reactjs and ionic framework .这是一篇使用 reactjs 和 ionic framework 的博客文章。
I would suggest also that you look at the React.Context API Documentation我还建议您查看React.Context API 文档
import React, { useState } from "react";
//more imports
const Login: React.FC = () => {
//some states
const { storeData, setStoreData } = React.useContext(AppContext);
const loginUser = (event: any) => {
event.preventDefault();
const loginApi = LoginAPI.userLogin(userEmail, password);
loginApi
.then((res) => {
if (res) {
setStoreData(res.store_id)
}
else {
alert('invalid user')
}
})
};
return (
<IonPage>
<IonContent>
<div className="login-container">
<div className="login-form-wrapper">
Login please
<form className="login-form" onSubmit={loginUser}>
//my form data
</form>
</div>
</div>
</IonContent>
<StoreView
//here i am getting error
// data = {setStoreData} <== this is wrong?
/>
</IonPage>
);
};
export default Login;
import React, { useEffect, useState } from 'react';
//more imports
const StoreView: React.FC = () => {
const { storeData } = React.useContext(AppContext);
return (
<IonContent>
//here i want to my props data
</IonContent>
);
}
export default StoreView;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.