Реагировать: определить, является ли дочерняя поддержка JSX или функцией, возвращающей JSX

Я хочу создать компонент, который может иметь JSX или функцию, которая возвращает JSX как дочерний элемент. когда я регистрирую typeof реквизит children для функции или JSX, это оба object. Как определить, является ли реквизит children функцией или JSX?

Это то, что у меня есть до сих пор

type Props = {
    children: ReactNode | ((close: () => void) => ReactNode);
};

const Comp = ({ children }: Props) => (
    {typeof children === 'function' ? children() : children}
)

typeof children равно function, когда вы передаете функцию в качестве дочернего элемента Comp. Ваш пример не компилируется под TS и не запускается под JS, пожалуйста, постарайтесь поделиться безошибочным кодом, где это возможно, который действительно демонстрирует вашу проблему.

— 05.05.2022 23:08

javascript reactjs

05.05.2022 22:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваше состояние в порядке, и вам просто нужно завернуть div. Когда JSX транспилируется, он будет типа object

const Comp = ({ children }: any) => {
  console.info('***', typeof children);
  return <div>{typeof children === 'function' ? children() : children}</div>;
};

const Element = () => {
  return <div>
  <Comp>{() => <div>Hello</div>}</Comp>
  <Comp><div>Foo</div></Comp>
  </div>
}

const domContainer = document.querySelector('#app');
ReactDOM.render(<Element/>, domContainer);

<script crossorigin src = "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id = "app"> </div>

05.05.2022 23:20

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

Компонент React без данных: условие в ParentComponent или возврат null в ChildComponent?

Почему Web3 .GetReserves() спамит мою консоль?

React native — выделить значок «шипучим» способом

Я не могу добавить имя класса в React с помощью useEffect или?

Как реализовать вызов API на сервер и отображать данные при нажатии кнопки (React, Node, Express)

Как условно получить в useEffect

Создайте состояние реакции, которое меняется со временем

Почему хук React useRef выдает ошибку при использовании?

Как мне добиться этого 2 веб-адреса для одного сайта. то есть www.administrator.sitename.com и www.sitename.com?

Как исправить React Hook «useAppContext» не может быть вызван в компоненте класса Ошибка?

Реагировать: определить, является ли дочерняя поддержка JSX или функцией, возвращающей JSX

Ответы 1

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

Похожие вопросы