javascript - How to pass an object to a custom child component in ReactJS using Typescript? - Stack Overflow

admin管理员组

文章数量:1325236

Objective

I want to fetch data in App's root ponent via useEffect() (and set them to state) and then pass state to my custom ponent. I can do it with JS but the same steps don't work with Typescript.

My error message is the following:

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

To me, it looks like I have an object with Person type I can't assign to another type of 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;

I could not find any relevant YT video nor previous post here... Based on these questions (here and here) I think I need to declare the interface of my ponent?

If so:

• Where?
• Why do I need to declare the interface of my ponent if I have already defined interface for Person that I am passing to my ponent?
• How should the declaration look like?
• What is the error telling me?
• How should I pass data to the child ponent correctly? (and also from child to parent)
• Also is there something else I should know?

Any help is very appreciated. Thank you!

Objective

I want to fetch data in App's root ponent via useEffect() (and set them to state) and then pass state to my custom ponent. I can do it with JS but the same steps don't work with Typescript.

My error message is the following:

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

To me, it looks like I have an object with Person type I can't assign to another type of 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;

I could not find any relevant YT video nor previous post here... Based on these questions (here and here) I think I need to declare the interface of my ponent?

If so:

• Where?
• Why do I need to declare the interface of my ponent if I have already defined interface for Person that I am passing to my ponent?
• How should the declaration look like?
• What is the error telling me?
• How should I pass data to the child ponent correctly? (and also from child to parent)
• Also is there something else I should know?

Any help is very appreciated. Thank you!

• javascript
• reactjs
• typescript
• react-ponent

Share Improve this question Follow edited Aug 22, 2020 at 6:28 Vagner Wentz 57622 gold badges1111 silver badges3434 bronze badges asked Aug 21, 2020 at 21:57 Lukas BunatLukas Bunat 7311 gold badge11 silver badge1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

The issue is that this

const Profile: React.FC<Person>

should be this

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

That is, props isn't of type Person, you have a obj prop in Profile which is of type Person.

The type parameter T in React.FC<T> needs to be the shape of all your custom props, on top of the built in React ones (i.e. children) - so basically an object with fields.

For instance if you had another prop foo which should be a number, it would be React.FC<{ obj: Person, foo: number }>, etc.

You are passing a prop shape that's actually

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

but you declared

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

Since I see you like to learn and try things out, I'll let you figure out where the adjustment can be done! If not, let me know and I'll add more details.

You can do something like that:

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

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

And now you will be good, because when you set Profile tag in App Component you are passing the obj prop:

<Profile obj={profile} />

本文标签： javascriptHow to pass an object to a custom child component in ReactJS using TypescriptStack Overflow