Можно ли использовать хуки React без jsx?

Рейтинг: 1Ответов: 1Опубликовано: 22.04.2023

Можно какой нибудь простейший пример на хуках, где компонент может вернуть div, в котором находятся два других компонента, в которые мы передаем пропсы, при этом нет возможности подключить jsx.

Ответы

▲ 1Принят

Для лучшего понимания настоятельно рекомендую почитать про хук createElement

Доказательством того что я тут не использую синтаксис JSX является то что я не включил флажок для Babel

В данном примере есть Conatiner, который является div-ом, внутри строится строка, где имя (компонент Name) и фамилия (компонент Surname) - это 2 разных компонента. Остальное думаю должно быть понятно

const { createElement, Fragment } = React;
const { createRoot } = ReactDOM;

const Surname = ({ surname }) => {  
  return createElement(
    'span',
    { className: 'surname' },
    surname
  );
}

const Name = ({ name }) => {  
  return createElement(
    'span',
    { className: 'name' },
    name
  );
}

const Container = () => {
  return createElement(
    'div',
    { className: 'container' },
    createElement(Fragment, null, 'Hello, '),
    createElement(Name, {name: 'Tom'}),
    createElement(Fragment, null, ' '),
    createElement(Surname, {surname: 'Cruise'}),
    createElement(Fragment, null, '!'),
  );
}

const App = () => {
  return createElement(Container);
}

// Rendering

const domNode = document.getElementById('root');
const root = createRoot(domNode);
const app = createElement(App);
root.render(app);
.container {
  background-color: lightgray;
}

.name {
  color: red;
}

.surname {
  color: green;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>