मेरे पास एक header.tsx फ़ाइल है:

import React from "react";

export const Header = (title:any) => {
    return (
        <div>
            <h1>{title}</h1>
        </div>
    )
};

तब मेरे index.tsx में शामिल हैं:

import React from "react";
import ReactDOM from "react-dom";
import { Header } from "./header"

ReactDOM.render(<Header title={"abc"} />, document.getElementById("root"));

हालांकि, जब मैं npm run dev करता हूं, तो कोड सफलतापूर्वक संकलित हो जाएगा, स्थानीयहोस्ट पृष्ठ खाली (रिक्त) है। इसके बजाय मुझे उम्मीद थी कि यह "एबीसी" प्रदर्शित करेगा।

अगर मैं इसके बजाय Header को इस तरह से परिभाषित करता हूं, तो यह जादुई रूप से काम करेगा:

export class Header extends React.Component<{ title: string }> {
    render() {
        return (
            <div>
                {this.props.title}
            </div>
        )
    }
};

तो इसमें गलत क्या है कि Header को मूल रूप से ऊपर परिभाषित किया गया था?

1
Jase 10 जुलाई 2021, 13:17

3 जवाब

title प्रॉप्स ऑब्जेक्ट में एक प्रॉपर्टी है। आप नीचे की तरह विनाश और उपयोग कर सकते हैं,

 interface HeaderConfig {
  title: string
}

export const Header = ({ title }: HeaderConfig) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

कोडसैंडबॉक्स - https://codesandbox.io/s/vibrant -moser-d4ss4?file=/src/App.tsx

1
Sarun UK 10 जुलाई 2021, 10:32
export const Header = (props:any) => {
    return (
        <div>
            <h1>{props.title}</h1>
        </div>
    )
};
1
Demystifier 10 जुलाई 2021, 10:35

क्योंकि आप प्रॉप्स का गलत तरीके से इस्तेमाल कर रहे हैं। हैडर का सहारा एक वस्तु है। आप अपनी समस्या को ठीक करने के लिए विनाश वस्तु का उपयोग कर सकते हैं:

export const Header = ({title} : {title: string}) => {}
1
Viet 10 जुलाई 2021, 10:30