Можно какой нибудь простейший пример на хуках, где компонент может вернуть 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>
-
1
render()
, оставь толькоreturn React.createElement('div', null,
Привет, ${this.props.toWhat});
. Вот и вся разница.