如何使用Typescript将对象传递给ReactJS中的自定义子组件？

编程问答 2022-08-15

问题描述

客观

我想通过useEffect()在App的根组件中获取数据（并将其设置为state），然后将状态传递给我的自定义组件。我可以使用JS来做到这一点，但是相同的步骤不适用于Typescript。

我的错误消息如下：

Type '{ obj: Person; }' is not assignable to type 'IntrinsicAttributes 
& Person & { children?: ReactNode; }'. Property 'obj' does not exist 
on type 'IntrinsicAttributes & Person & { children?: ReactNode; }'.TS2322

在我看来，我有一个类型为Person的对象，我无法将其分配给其他类型的Person ...

App.tsx 

import React,{ useState,useEffect } from 'react';
import Profile from '../Profile';

export interface Person {
  name: string;
  email: string;
  dob: string;
  address: string;
  number: string;
  userName: string;
  pssw: string;
};

const initPerson: Person = {
  name: "",email: "",dob: "",address: "",number: "",userName: "",pssw: ""
};

const App: React.FC = () => {
  const [ profile,setProfile ] = useState<Person>(initPerson)

  useEffect(() => {
    // logic for fetching data and setting the state
  },[]);

  return (
    <div id="app">
      <h1>Random user generator</h1>
      <div id="content">
        <Profile obj={profile} />
    </div>
  );
}

export default App;

Person.tsx 

import React from 'react';
import { Person } from './app/App'

const Profile: React.FC<Person> = (props) => {
    return (
        <div id="Card">
            {/* photo */}
            <div id="photo"><img src="" alt="profile" /></div>
            {/* name */}
            <div id="name"></div>
            {/* email */}
            <div id="email"></div>
            {/* dob */}
            <div id="dob"></div>
            {/* adress */}
            <div id="address"></div>
            {/* number */}
            <div id="number"></div>
            {/* pssw */}
            <div id="password"></div>
        </div>
    );
}

export default Profile;

我在这里找不到任何相关的YT视频或以前的帖子...基于这些问题（here和here），我认为我需要声明组件的接口？

如果是这样：

  • 在哪里？
  • 如果已经为要传递给组件的Person定义了接口，为什么我需要声明组件的接口？
  • 声明的外观如何？
  • 告诉我什么错误？
  • 如何正确将数据传递给子组件？ （以及从孩子到父母）
  • 还有什么我应该知道的吗？

非常感谢您的帮助。谢谢！

解决方法

问题是这个

const Profile: React.FC<Person>

应该是这个

const Profile: React.FC<{ obj: Person }>

也就是说，props不是Person类型，您在obj中有一个Profile类型的Person道具。

{{1}中的类型参数T必须是您所有自定义道具的形状，并位于内置的React道具（即React.FC<T>）之上-因此基本上是一个带有字段。

例如，如果您有另一个道具children，该道具应该是一个数字，那么它将是foo，等等。

,

您正在传递实际上是一个道具形状

public static void main(String[] args) {


    Scanner keyboard = new Scanner(System.in);

    int response;


    do {
        System.out.println("What problem do you want to do?");
        System.out.println("1:Celcius to Farenheit");
        System.out.println("2:Slope Formula");
        System.out.println("3:Averages");
        System.out.println("4:Perimeter");
        System.out.println("5:Exit\n\n");

        response = keyboard.nextInt();
        if (response == 1) {
            System.out.println("Degrees Celcius:");
            int degrees = keyboard.nextInt();
            System.out.println(degrees + " degrees Celcius is " + celsToFarenheit(degrees) + " degrees Farenheit.");
        } else if (response == 2) {
            System.out.println("x1:");
            int x1 = keyboard.nextInt();
            System.out.println("y1:");
            int y1 = keyboard.nextInt();
            System.out.println("x2:");
            int x2 = keyboard.nextInt();
            System.out.println("y2:");
            int y2 = keyboard.nextInt();
            System.out.println("The slope is " + slopeFormula(x1,y1,x2,y2));
        } else if (response == 3) {
            System.out.println("First number:");
            int num1 = keyboard.nextInt();
            System.out.println("Second number:");
            int num2 = keyboard.nextInt();
            System.out.println("The average is " + average(num1,num2));
        } else if (response == 4) {
            System.out.println("Length:");
            int length = keyboard.nextInt();
            System.out.println("Width:");
            int width = keyboard.nextInt();
            System.out.println("The perimeter is " + perimeter(length,width));
        }
    }
    while (response != 5);
}

但是你宣布了

export interface Person {
  obj: {
    name: string;
    email: string;
    dob: string;
    address: string;
    number: string;
    userName: string;
    pssw: string;
  }
};

由于我看到您喜欢学习和尝试一些东西，因此我将让您找出可以进行调整的地方！如果没有，请告诉我，我将添加更多详细信息。

,

您可以执行以下操作：

// Here you create an interface for Profile component that receives an "obj" prop of Person type.
interface ProfileProps {
  obj: Person;
}

const Profile: React.FC<ProfileProps> = (props) => {
   console.log(props.obj);
   return (
   ....

现在您会很好，因为在App Component中设置配置文件标记时，您正在传递obj属性：

<Profile obj={profile} />
javascriptreact-componentreactjsreactjstypescripttypescript