GithubHelp home page GithubHelp logo

dotnet-practice-labs's People

Contributors

pklgn avatar

Watchers

 avatar

dotnet-practice-labs's Issues

Решение со звёздочками

function StarGrade(props: StarGradeProps) {
const { currentGrade, maxGrade, setGrade } = props;
// TODO: add isGrading or smth like that to commit user input
const filledStars = Array.from({ length: currentGrade }, () => (
<Star state="filled" />
));
const defaultStars = Array.from({ length: maxGrade - currentGrade }, () => (
<Star state="default" />
));
function handleMouseOver(event: React.SyntheticEvent<HTMLDivElement>) {
if (event.currentTarget.dataset && event.currentTarget.dataset.index) {
setGrade(Number(event.currentTarget.dataset.index) + 1);
}
}
return (
<div className={styles.starGrades}>
{filledStars.length !== 0 &&
filledStars.map((filledStar, index) => (
<div
data-index={JSON.stringify(index)}
key={index}
onMouseOver={handleMouseOver}
>
{filledStar}
</div>
))}
{defaultStars.length !== 0 &&
defaultStars.map((defaultStar, index) => (
<div
data-index={JSON.stringify(index + filledStars.length)}
key={index + filledStars.length}
onMouseOver={handleMouseOver}
>
{defaultStar}
</div>
))}
</div>
);
}

Решение с dataset мне лично не очень нравится. У нас тут дз было про React и TS, а тут нативные JS методы. Но в целом норм.
На самом деле, тебе это только усложнило код. Также index в key это не очень хорошая практика, но тоже приемлемо.

Пропсы это не тип для использования


Привет!
Пропсы нужны для указания того, что ты передаешь в компонент. Ты не можешь их экспортировать и использовать как тип.
Зато ты можешь создать тип Grade и использовать его как пропсы type GradeProps = Grade!

Задание стилей элементу

useEffect(() => {
if (textareaRef.current) {
textareaRef.current.style.height = "inherit";
const scrollHeight = textareaRef.current.scrollHeight;
textareaRef.current.style.height = scrollHeight + "px";
}
});

В реакте мы фундаментально стараемся как меньше взаимодействовать с DOM, потому что подобные действия разрывают наш флоу работы приложения, и из-за этого оно работает медленнее и менее понятно. Также это недекларативно.
В таком случае обычно выносят всё что тебе нужно в классы в css файл, создают состояние типа isTextAreaHightlighted и в className пришут className={`${isTextAreaHightlighted && "textArea_highlighted"}`}
В данном же случае, тебе надо задавать высоту динамически. Ты можешь сделать состояние textAreaHeight типа number, менять его в handleTextChange, а в компоненте сделать переменную textAreaStyles, где и задавать стили, потом передавать это в пропсы.
Примерно так.
image
image
image
image

Незачем передавать callback

setText(() => "");
setRating(() => 0);
setReviews(() => [review]);

Ты можешь передавать туда callback, но он нужен, чтобы из параметров получать текущее состояние.
В твоём случае, это лишь усложнение. Можешь просто устанавливать значение и будет то же самое.

Nullable поля

Not null прописано только у первичных ключей, у остальных полей не указано. Необходимо определить, какие поля точно не могут быть null (например название планеты) и прописать им not null

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.