Как получить все реквизиты из компонента, который передается как реквизит?

У меня есть этот компонент под названием SpecialComp, который передается в MyComp как реквизит. Мой вопрос заключается в том, как передать все реквизиты из SpecialComp (цвет, размер, вес) в MyComp, чтобы я мог переопределить атрибуты, установленные в MyComp? Другими словами, как я могу получить доступ к свойствам SpecialComp внутри MyComp?

<MyComp customcomp  = {<SpecialComp color=‘green’ size=‘20’ weight=‘bold’/>} />

export const MyComp = ({customcomp}) => {
  return (
    <div>
    {React.cloneElement(customcomp, {color: ‘red’})}
    </div>
  );
}

Использовать избыточность или некоторые глобальные переменные?

Marcus.Aurelianus 21.11.2022 07:39

Это приложение не использует Redux и не будет его использовать

Devmix 21.11.2022 07:40

Вы проверили это? reactjs.org/docs/react-api.html#cloneelement

Amini 21.11.2022 07:47

Customcomp.props не работает ??

subodhkalika 21.11.2022 07:47
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
2
4
73
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Если вы не хотите использовать какое-либо решение для управления состоянием. Тогда вы можете рассмотреть возможность поднятия состояния (проп) вверх. См. примеры кода ниже:

import React from "react";

export const App = () => {
  const [specialProps, setSpecialProps] = useState({
    color: "green",
    size: "20",
    weight: "bold",
  }); // make the properties as state

  return (
    <MyComp
      customComponentStyles = {specialProps} // you can pass it here
      customComponent = {
        <SpecialComp
          color = {specialProps.color} // you can pass it here too
          size = {specialProps.size}
          weight = {specialProps.weight}
        />
      }
    />
  );
};

export const MyComp = ({ customComponentStyles, customComponent }) => { // access the same prop here as well
  return <div>{React.cloneElement(customcomp, { color: "red" })}</div>;
};

Добро пожаловать в СО! Можете ли вы объяснить свой ответ? Обратитесь к руководству Как написать хороший ответ, чтобы улучшить свой вклад.

Jonathan 23.11.2022 11:08

Код, я считаю, не требует пояснений с комментариями. Пожалуйста, дайте мне знать, если это не так.

Unclebigay 24.11.2022 09:12
Ответ принят как подходящий

Вы можете просто получить доступ к реквизиту, позвонив customcomp.props.

<MyComp
    customcomp = {<SpecialComp color = "green" size = "20px" weight = "bold" />}
  />

const MyComp = ({ customcomp }) => {

  console.info(customcomp.props);
  //Prints: {color: "green", size: "20px", weight: "bold"}

  return <div>{React.cloneElement(customcomp, { color: "red" })}</div>;
};

export default MyComp;

CodeSandbox для этого здесь.

<MyComp customcomp  = {<SpecialComp color=‘green’ size=‘20’ weight=‘bold’/>} />

export const MyComp = ({customcomp}) => {
  return (
    <div>
    {React.cloneElement(customcomp, {...customcomp.props,color: ‘red’})}
    </div>
  );
}

Другие вопросы по теме