Как в React поместить один компонент в другой, на js это просто (appendChild, append, prepend) а в Reacte не могу понять как это реализовать. Примерно так хочется реализовать
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.block{
display: flex;
flex-wrap: wrap;
}
.zone{
width: 90%;
margin: 10px auto;
display: flex;
justify-content: space-around;
align-items: center;
}
#z1{
border: 1px dashed rgb(173, 173, 173);
height: 350px;
}
.box{
min-width: 200px;
min-height: 200px;
border: 2px dashed gray;
padding: 10px;
text-align: center;
}
#bx1{
background: lightblue;
}
#bx2{
background: pink;
}
#bx3{
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: center;
border-top: 1px dashed gray;
margin-top: 20px;
padding-top: 10px;
}
#btn{
padding: 5px 10px;
border: 1px solid #fff;
color: #fff;
background: rgb(79, 40, 255);
border-radius: 5px;
outline: none;
cursor: pointer;
transition: transform .3s ease;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
#btn:hover{
transform: translateY(-3px);
transition: transform .3s ease;
}
</style>
<div class="block">
<div id="z1" class="zone">
<div id="bx1" class="box">BOX 1</div>
<div id="bx2" class="box">BOX 2</div>
</div>
<div id="z2" class="zone">
<button id="btn" onClick="move()">BUTTON</button>
</div>
</div>
<script>
const bx1 = document.querySelector("#bx1")
const bx2 = document.querySelector("#bx2")
const zone = document.querySelector(".zone")
let click = true;
const move = () => {
click ? bx1.appendChild(bx2) : zone.append(bx2)
click = !click
}
</script>
</body>
</html>
React
Box.js
import './Box.css'
function Box(props){
return(
<div className={props.className} id={props.id}>{props.children}</div>
)
}
export default Box
App.js
function App() {
return (
<Box className="block">
<Box id="z1" className="zone">
<Box id="bx1" className="box">BOX 1</Box>
<Box id="bx2" className="box">BOX 2</Box>
</Box>
<Box id="z1" className="zone">
<button>BUTTON</button>
</Box>
</Box>
)
}
export default App;
Как это реализовать? Что нужно прописать в state? Элементы могут быть разные, кнопки, изображения и т.д.
Пока что максимум смог придумать это:
import Box from './components/Box/Box'
import Button from './components/Button/Button'
import {useState, createElement} from 'react'
function App() {
const [state, setState] = useState({
count: 1,
page: {
id_0: {
classes: ['block'],
child: ['id_1', 'id_2'],
text: null,
func: null,
isParent: false,
component: Box
},
id_1: {
classes: ['zone'],
id: null,
child: ['id_3', 'id_4'],
text: null,
func: null,
isParent: true,
component: Box
},
id_2: {
classes: ['zone'],
id: null,
child: ['id_5'],
text: null,
func: null,
isParent: true,
component: Box
},
id_3: {
classes: ['box'],
id: 'bx1',
child: [],
text: 'BOX 1',
func: null,
isParent: true,
component: Box
},
id_4: {
classes: ['box'],
id: 'bx2',
child: [],
text: "BOX 2",
func: null,
isParent: true,
component: Box
},
id_5: {
classes: [],
id: null,
child: [],
text: 'BUTTON',
func: onChange,
isParent: true,
component: Button
}
}
})
function onChange(){
const s = {...state}
s.page['id_3'].child.push('id_4')
s.page['id_1'].child.splice(1)
setState(s)
}
function s (id){
return (
createElement(
state.page[id].component,
{id: state.page[id].id, key: id, className: state.page[id].classes.join(' ')}, state.page[id].text,
state.page[id].child.map(item => state.page[item].child.length ?
s(item) :
createElement(
state.page[item].component,
{id: state.page[item].id,key: item, className: state.page[item].classes.join(' '), onChange}, state.page[item].text
)
)
)
)
}
return (
Object.keys(state.page).map(id=> !state.page[id].isParent ? s(id) : null)
)
}
export default App;