React Как создать component ?
Пробую реализовать элемент <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);