如何在反应离子中将道具从一个组件传递到另一个组件答案

【问题标题】：how pass the props from one component to another in react-ionic如何在反应离子中将道具从一个组件传递到另一个组件
【发布时间】：2020-05-19 15:12:59
【问题描述】：

我将道具从 Login 组件传递到 StoreView 组件。当我传递道具时出现打字稿错误。

TypeScript 错误：Type '{ data: Dispatch>; }' 不可分配给类型“IntrinsicAttributes”。类型“IntrinsicAttributes”上不存在属性“数据”。

我的登录组件

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;

我想将我的道具传递给 StoreView 组件，但在 Login 组件中出现错误。

我的 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;

【问题讨论】：

这里有一个blog 可以帮助你。

标签： javascript reactjs typescript ionic-framework

【解决方案1】：

您必须为 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>
    ); 
}

然后你可以像在你的例子中那样使用它（但你应该在那里传递storeData，而不是setStoreData）。

【讨论】：

【解决方案2】：

对于这个小例子，我建议使用 React.Context 来管理两个组件之间的状态。

这是blog post using reactjs and ionic framework。

我还建议您查看React.Context API Documentation

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;

【讨论】：