React Как создать component
?

Пробую реализовать элемент <details> для повторного использования в реакт проектах Подскажите, пожалуйста что я делаю не правильно на примере вот этого элемента из sandBox Как его улучшить? И как для примера вывeсти значения из testData?


Ответы (1 шт):

Автор решения: Роман Татаринов

У вас там целый ряд проблем

  1. Вы создаете компонент с названием Details и рендерите в функции return этот самый компонент, который создаете. Там должен быть html тэг details а не компонент
  2. Много лишнего и ненужного. Например, html-parser вам зачем? Вы можете в children просто вставлять JSX, и реакт с ним отлично будет работать. Без всяких строк.
  3. className также не нуждается в обработке какой-то дополнительной библиотекой. Более того, вы почему то создаете const classes и дальше передаете ее во все html тэги в компоненте. И получается, что у вас будут навешаны везде одни и те же классы. Что недопустимо в продакшен средах. Обычно className передают только на конревой элемент. Тоже самое касается attrs. Их также вешать нужно только на корневой элемент
  4. По поводу вашего вопроса, мы можете развернуть 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);
→ Ссылка