Пробую реализовать элемент <details>
для повторного использования в реакт проектах
Подскажите, пожалуйста что я делаю не правильно на примере вот этого элемента из sandBox
Как его улучшить? И как для примера вывeсти значения из testData?
1 ответ
У вас там целый ряд проблем
- Вы создаете компонент с названием
Details
и рендерите в функцииreturn
этот самый компонент, который создаете. Там должен бытьhtml
тэгdetails
а не компонент - Много лишнего и ненужного. Например,
html-parser
вам зачем? Вы можете вchildren
просто вставлять JSX, и реакт с ним отлично будет работать. Без всяких строк. className
также не нуждается в обработке какой-то дополнительной библиотекой. Более того, вы почему то создаетеconst classes
и дальше передаете ее во всеhtml
тэги в компоненте. И получается, что у вас будут навешаны везде одни и те же классы. Что недопустимо в продакшен средах. ОбычноclassName
передают только на конревой элемент. Тоже самое касаетсяattrs
. Их также вешать нужно только на корневой элемент- По поводу вашего вопроса, мы можете развернуть
testData
при помощи спред оператора при вызове компонента.<Details {...testData} />
- тогда пропсы передадутся в компонент. Результатом всех исправлений станет примерно такой код
import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import "./styles.css";
const Details = ({
className,
title,
children,
onClick,
disabled,
...attrs
}) => {
const handleClick = (e) => {
if (disabled) {
e.preventDefault();
return;
}
if (onClick) {
onClick(e);
}
};
return (
<details
className={className}
disabled={disabled}
onClick={handleClick}
{...attrs}
>
<summary>{title}</summary>
<div>{children}</div>
</details>
);
};
Details.propTypes = {
className: PropTypes.string,
title: PropTypes.node,
children: PropTypes.node,
onClick: PropTypes.func,
disabled: PropTypes.bool
};
Details.defaultProps = {
className: "",
title: "Title text",
children: "Default text",
onClick: () => {},
disabled: false
};
const testData = {
title: "Test text for Title",
children: (
<p>
This is simple text for description about{" "}
<a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/details">
details
</a>
</p>
)
};
const rootElement = document.getElementById("root");
ReactDOM.render(<Details {...testData} />, rootElement);
-
Огромное спасибо, за развернутый ответ. Я только на начальной стадии познания Реакта. У меня вопрос, если есть необходимость для summary и div обертки для контента, тоже задавать className их необходимо держать под какими-то другими переменными в отличии от className для details? (Можете показать как будет выглядеть код?) И ещё, по поводу parser почему то столкнулся с проблемой, что если не распаршивать строку с html тегами, то оно при рендеренги так и отображало эти теги, не знаю с чем это было связано 24 апр 2021 в 13:31