मैं इन दिनों टाइपस्क्रिप्ट के साथ रिएक्ट का अभ्यास कर रहा हूं।

मेरे पास नीचे के रूप में प्रॉप्स टाइप है

export type PropType = {
  ingredientAdded: (type: keyof IngredientType) => void;
}

तथा

const buildControl: React.FunctionComponent<PropType> = (props) => (
  <div className={classes.BuildControl}>
    <div className={classes.Label}>{props.label}</div>
    <button className={classes.Less}>Less</button>
    <button className={classes.More} onClick={props.ingredientAdded as any}>More</button>
  </div>
);

शरीर के रूप में।

यहाँ समस्या यह है कि मैं onClick={props.ingredientAdded} बिना किसी को कास्ट किए पास नहीं कर सका।

जब मैं ऑनक्लिक प्रकार देखता हूं, तो यह मुझे देता है

onClick?: MouseEventHandler<T>;
type MouseEventHandler<T = Element> = EventHandler<MouseEvent<T>>;

ऐसा लगता है कि ingredientAdded: (type: keyof IngredientType) => void; फ़ंक्शन प्रकार ऑनक्लिक के लिए मान्य नहीं है।

हालांकि यह काम करता है।

मेरा प्रश्न यह है कि किसी . को कास्ट करने के बजाय यहां टाइप करने का सही तरीका क्या है?

संपादित करें

मूल घटक फ़ंक्शन पास करता है।

type PropsType = {
  ingredientAdded(type: keyof IngredientType): void;
  ingredientRemoved(type: keyof IngredientType): void;
}

const controls: { label: string, type: keyof IngredientType }[] = [
  { label: 'Salad', type: 'salad' },
  { label: 'Bacon', type: 'bacon' },
  { label: 'Cheese', type: 'cheese' },
  { label: 'Meat', type: 'meat' },
];

const buildControls: React.FunctionComponent<PropsType> = (props) => (
  <div className={classes.BuildControls}>
    {controls.map(ctrl => (
      <BuildControl
        ingredientAdded={() => props.ingredientAdded(ctrl.type)}
        ingredientRemoved={() => props.ingredientRemoved(ctrl.type)}
        key={ctrl.label} label={ctrl.label} />
    ))}
  </div>
);

export default buildControls;
1
Derviş Kayımbaşıoğlu 27 मार्च 2020, 14:17
सवाल यह है, 1) क्या props.ingredientAdded को क्लिक इवेंट ऑब्जेक्ट की आवश्यकता है 2) इसे अपना type तर्क कैसे मिलता है?
 – 
ford04
27 मार्च 2020, 15:00
उत्तर 1) क्लिक ईवेंट हैंडलर की आवश्यकता नहीं है। प्रकार तर्क मूल घटक से पारित किया जाता है। मैं कोड संपादित करूंगा
 – 
Derviş Kayımbaşıoğlu
27 मार्च 2020, 15:12

2 जवाब

ऐसा इसलिए है क्योंकि onClick रिएक्ट पर अपेक्षा करता है कि आप एक एकल तर्क के साथ एक फ़ंक्शन पास कर रहे हैं जो एक माउस इवेंट है।

आप इसे दो तरीकों से हल कर सकते हैं:

  1. onClick को एरो फंक्शन से लपेटें:
  // ...
  onClick={ (event) => { props.ingredientAdded(type) } }
  1. (सबसे अच्छा तरीका!) इस तर्क को अपने बटन के लिए एक उप-घटक पर करें, इस तरह आपके ईवेंट हैंडलर को ingredientAdded की निर्भरता का स्पष्ट पता नहीं चलेगा:

interface IngredientType {
  type: string;
}

export type PropType = {
  handler: (type: keyof IngredientType) => void;
  type: keyof IngredientType;
};

const MoreButton: React.FunctionComponent<PropType> = props => {
  const handleClick = () => {
    props.handler(props.type);
  };

  return <button onClick={handleClick}>More</button>;
};

const MainComponent = ({ingredientAdded, type}) => {
  return <MoreButton handler={ingredientAdded} type={type} />
}

दूसरे तरीके के लिए उदाहरण देखें।

0
Inacio Schweller 27 मार्च 2020, 14:59
पहले दृष्टिकोण के लिए, प्रकार यहां उपलब्ध है। यह मूल घटक से पारित किया जाता है। दूसरे दृष्टिकोण के लिए, मुझे पता है कि ऐसा करने के अन्य तरीके हैं लेकिन मैं घटक के व्यवहार को बदलना नहीं चाहता। मुझे समझ में नहीं आया कि कामकाजी व्यवहार के लिए कोई प्रकार की परिभाषा क्यों नहीं है
 – 
Derviş Kayımbaşıoğlu
27 मार्च 2020, 15:09
में समज। आमतौर पर टाइपस्क्रिप्ट और टाइप परिभाषाएँ हमें उन तरीकों का पता लगाने में मदद करती हैं जिनसे हम अपने कोड को बेहतर बना सकते हैं, इसलिए मैंने दूसरा समाधान प्रस्तावित किया।
 – 
Inacio Schweller
27 मार्च 2020, 15:13

कृपया किसी फ़ंक्शन में props.ingredientAdded लपेटने का प्रयास करें।

बिना क्लिक इवेंट

const buildControl: React.FunctionComponent<PropType> = (props) => (
  <div className={classes.BuildControl}>
    <div className={classes.Label}>{props.label}</div>
    <button className={classes.Less}>Less</button>
    <button className={classes.More} onClick={() => { props.ingredientAdded() }}>More</button>
  </div>
);

क्लिक इवेंट के साथ

const buildControl: React.FunctionComponent<PropType> = (props) => (
  <div className={classes.BuildControl}>
    <div className={classes.Label}>{props.label}</div>
    <button className={classes.Less}>Less</button>
    <button className={classes.More} onClick={(event: React.MouseEvent) => { props.ingredientAdded(event) }}>More</button>
  </div>
);
0
sunknudsen 27 मार्च 2020, 15:04
props.ingredientAdded() फ़ंक्शन में टाइप पैरामीटर है जो आपके उदाहरण में शामिल नहीं है और यह चाइल्ड कंपोनेंट में भी उपलब्ध नहीं है। इसलिए फ़ंक्शन को संदर्भित करने की आवश्यकता है।
 – 
Derviş Kayımbaşıoğlu
27 मार्च 2020, 15:10
1
मुझे नहीं लगता कि इस तरह से फ़ंक्शन को संदर्भित करना टाइपस्क्रिप्ट के साथ रिएक्ट में अच्छा खेलेगा, लेकिन मैं विशेषज्ञ नहीं हूं।
 – 
sunknudsen
27 मार्च 2020, 15:13
मेरी आंत महसूस कर रही है कि इस प्रतिमान में फिट होने के लिए आपको अपने कोड को दोबारा करने की आवश्यकता हो सकती है।
 – 
sunknudsen
27 मार्च 2020, 15:13