#reactjs
#reactjs
Вопрос:
Я просматриваю учебник по 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-й главе, и до сих пор код каждой главы работал точно так же, как и в книге. Однако это не так. Я не уверен, что это неправильный код (и, возможно, мне следует обратиться к автору) или это то, что больше не разрешено, и книга просто устарела.
Комментарии:
1. Я поместил этот код в изолированную среду (за вычетом зависимости от значка); кажется, работает нормально. Чего здесь не происходит, что вы ожидаете увидеть? codesandbox.io/s/background-and-onclick-d5d10
2. глядя на оба ответа ниже (и, кажется, в учебнике говорится, но несколькими разделами позже), что фактический эффект происходит только после передачи реквизита. прямо сейчас, в codebox (я только что понял, что в дальнейшем я буду использовать свой код в code sandbox), я не получаю цвет фона или событие щелчка. но да, как только мы добавим его реквизит, он должен.
Ответ №1:
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.
Комментарии:
1. Я все время забываю эту часть о собственных элементах DOM. Верно, да. все еще нужно проникнуться мышлением React вместе с мышлением JS.
Ответ №2:
Вам нужно перенести реквизиты из родительского компонента в собственный компонент react, стили и EventListeners могут быть прикреплены только к собственным компонентам, таким как div, button и т.д., Если компонент Star поддерживает добавление цвета и EventListeners через its, вы можете это сделать… оставайтесь в реквизитах и распространяйте их на star component, если вам нужна какая-либо помощь, пришлите мне codesandbox, я объясню в этом