0

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

1 ответ 1

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);
1
  • Огромное спасибо, за развернутый ответ. Я только на начальной стадии познания Реакта. У меня вопрос, если есть необходимость для summary и div обертки для контента, тоже задавать className их необходимо держать под какими-то другими переменными в отличии от className для details? (Можете показать как будет выглядеть код?) И ещё, по поводу parser почему то столкнулся с проблемой, что если не распаршивать строку с html тегами, то оно при рендеренги так и отображало эти теги, не знаю с чем это было связано 24 апр 2021 в 13:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.