Блог

Я просматриваю учебник по React Learning, в котором рассказывается о крючках. Часть с крючками работает нормально.

Автор иллюстрирует, как настраивать хуки с помощью простого в использовании стиля и связанных компонентов.

У меня есть следующий код.

 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;
  

К сожалению, отображение компонента также не меняет цвет фона. Он также не реагирует на щелчок. Приложение продолжает работать без ошибок или чего-либо еще. и я вижу, что набор свойств стиля виден в дереве компонентов в инструментах разработчика react в Firefox. Итак, код наверняка отражается на приложении.

Сейчас я нахожусь в 6-й главе, и до сих пор код каждой главы работал точно так же, как и в книге. Однако это не так. Я не уверен, что это неправильный код (и, возможно, мне следует обратиться к автору) или это то, что больше не разрешено, и книга просто устарела.

StarRating2 это компонент React, которому вы передаете пару реквизитов, StarRating2 но вы не используете эти реквизиты внутри StarRating2 компонента. Стили CSS и обработчики событий работают с собственными элементами DOM.

Что вам нужно сделать, так это использовать реквизиты, которые передаются в StarRating2 из App компонента. Вы можете применить styles prop к элементу-оболочке, который оборачивает весь код JSX StarRating2 компонента, и использовать onClick prop для элемента, который должен каким-либо образом реагировать на событие click.

Чтобы применить цвет фона в StarRating2 компоненте, оберните код JSX в элемент-оболочку, например div , а затем используйте значение style prop для этого элемента-оболочки.

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

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

Чтобы использовать обработчик щелчков, вам нужно будет использовать onClick prop и добавить его в любой собственный элемент DOM.

Вам нужно перенести реквизиты из родительского компонента в собственный компонент react, стили и EventListeners могут быть прикреплены только к собственным компонентам, таким как div, button и т.д., Если компонент Star поддерживает добавление цвета и EventListeners через its, вы можете это сделать… оставайтесь в реквизитах и распространяйте их на star component, если вам нужна какая-либо помощь, пришлите мне codesandbox, я объясню в этом