मैं एक रिएक्ट लर्निंग टेक्स्टबुक के माध्यम से जा रहा हूं जो मुझे हुक के बारे में बता रही है। हुक वाला हिस्सा ठीक काम कर रहा है।

लेखक कुछ आसान शैली और संबंधित घटकों के साथ हुक को अनुकूलित करने का तरीका बता रहा है।

मेरे पास निम्न कोड है।

import React from 'react';
// import logo from './logo.svg';
import './App.css';
import StarRating from './components/StarRating';
import StarRating2 from './components/StarRating2';
import Headline from './components/Headline';

function App() {
  return (
    <article>
      <Headline/>       
      <StarRating/>
      <StarRating2
       style={{ backgroundColor: "blue" }}
       onClick={e => alert(" click")}
      />
    </article>
  );
}

export default App;

घटक कोड इस प्रकार है।

import { useState } from "react";
import React from "react";
import { FaStar } from "react-icons/fa";

const createArray = length => [...Array(length)];

const Star = ({ selected = false, onSelect = f => f }) => (
    <FaStar color={selected ? "red" : "grey"} onClick={onSelect} />
  );

const numberOfStarts = 10;
const numberDefaultState = 7;


function StarRating2({ totalStars = numberOfStarts }) 
{
    //will hold the user’s rating
    // create this variable by adding the useState hook directly to the StarRating component:
    const [selectedStars, setSelectedStars] = useState(numberDefaultState);
    return (
      <>
        <p>
          This is Star Rating 2 - and it has some imporvements
        </p>            
        {createArray(totalStars).map((n, i) => (
          <Star
            key={i}
            selected={selectedStars > i}
            onSelect=   {
            () =>   { 
                        setSelectedStars(i + 1);
                                                
                    }
                        }
          />
        ))}
        <p>
          {selectedStars} of {totalStars} stars
        </p>
      </>
    );
}

export default StarRating2;

दुर्भाग्य से, न तो घटक प्रदर्शन अपने बैक ग्राउंड रंग को बदलता है। न ही यह एक क्लिक का जवाब देता है। ऐप बिना किसी त्रुटि या कुछ भी चलता रहता है। और मैं देख सकता हूं कि फ़ायरफ़ॉक्स में रिएक्ट डेवलपर टूल्स में कंपोनेंट ट्री में स्टाइल प्रॉपर्टीज सेट दिखाई दे रहे हैं। तो, कोड निश्चित रूप से ऐप पर प्रतिबिंबित हो रहा है।

मैं अभी छठे अध्याय में हूं, और अब तक, प्रत्येक अध्याय कोड ने ठीक उसी तरह काम किया है जैसा कि पुस्तक में है। हालांकि यह वाला नहीं है। मुझे यकीन नहीं है कि यह एक गलत कोड है (और शायद, मुझे लेखक तक पहुंचना चाहिए) या यह कुछ ऐसा है जिसकी अब अनुमति नहीं है और पुस्तक बस पुरानी है।

1
Jay 15 सितंबर 2020, 17:16

2 जवाब

सबसे बढ़िया उत्तर

StarRating2 एक रिएक्ट घटक है, आप StarRating2 के लिए कुछ प्रॉप्स पास कर रहे हैं, लेकिन आप StarRating2 घटक के अंदर उन प्रॉप्स का उपयोग नहीं कर रहे हैं। सीएसएस शैलियां और ईवेंट हैंडलर मूल DOM तत्वों पर कार्य करते हैं.

आपको जो करने की ज़रूरत है वह उन प्रॉप्स का उपयोग करना है जो StarRating2 को App घटक से पास किए गए हैं। आप रैपर तत्व पर styles प्रोप लागू कर सकते हैं जो StarRating2 घटक के सभी JSX कोड को लपेटता है और उस तत्व पर onClick प्रोप का उपयोग करता है जो किसी तरह से क्लिक ईवेंट पर प्रतिक्रिया करना चाहिए।

StarRating2 घटक में पृष्ठभूमि का रंग लागू करने के लिए, JSX कोड को एक आवरण तत्व में लपेटें, उदाहरण के लिए एक div और फिर इस आवरण तत्व पर style प्रोप के मान का उपयोग करें।

function StarRating2({ totalStars = numberOfStarts, style }) {
  ...

  return (
    <div style={style}>
      ...
    </div>
  );
}

क्लिक हैंडलर का उपयोग करने के लिए, आपको onClick प्रोप का उपयोग करना होगा और इसे किसी भी मूल डोम तत्व पर जोड़ना होगा।

1
Yousaf 15 सितंबर 2020, 17:35

आपको माता-पिता से मूल प्रतिक्रिया घटक, शैलियों और ईवेंट में प्रोप को फैलाने की आवश्यकता है, यदि स्टार घटक रंग और ईवेंट श्रोताओं को इसके माध्यम से जोड़ने का समर्थन करता है, तो आप कर सकते हैं ... बाकी प्रॉप्स में और इसे स्टार कंपोनेंट में फैलाएं, अगर आपको किसी मदद की ज़रूरत है, तो मुझे एक कोडसैंडबॉक्स भेजें, मैं उसमें समझाऊंगा

1
sidhant manchanda 15 सितंबर 2020, 17:24