1

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

4
  • 2
  • тут в классах, а в виде функций нигде найти не могу
    – martinUeer
    22 апр в 11:39
  • 1
    Замени класс на функцию и убери render(), оставь только return React.createElement('div', null, Привет, ${this.props.toWhat});. Вот и вся разница.
    – ksa
    22 апр в 13:57
  • спасибо, разобрался)
    – martinUeer
    25 апр в 11:54

1 ответ 1

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>

1
  • 1
    здорово, то что надо, спасибо большое
    – martinUeer
    25 апр в 11:21

Ваш ответ

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

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