0

Как в 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;
2
  • 1
    Если я правильно понимаю, то ответ на Ваш вопрос содержится в вашем же вопросе => children
    – Debroneee
    5 апр 2021 в 20:48
  • Правильно ли будет сделать так как в моём примере? Или есть более простой подход?
    – sasha-ld
    6 апр 2021 в 19:25

1 ответ 1

0
import "./styles.css";
import React from "react";

const Box = (props) => (
  <div id={props.el} className="box">
    BOX {props.el}
    {props.children}
  </div>
);

export default function App() {
  const [boxes, setBoxes] = React.useState([1, 2]);
  const [childrenBoxes, setChildrenBoxes] = React.useState([]);
  const [moved, setMoved] = React.useState(false);

  const move = () => {
    if (!moved) {
      const childBox = boxes.pop();
      setChildrenBoxes((prev) => [...prev, childBox]);
      setMoved(true);
      return;
    }
    const parentBox = childrenBoxes.pop();
    setBoxes((prev) => [...prev, parentBox]);
    setMoved(false);
  };

  return (
    <div className="block">
      <div id="z1" className="zone">
        {boxes.map((el) => (
          <Box
            el={el}
            key={el}
            children={childrenBoxes.map((el) => (
              <Box el={el} key={el} />
            ))}
          />
        ))}
      </div>
      <div id="z2" className="zone">
        <button id="btn" onClick={move}>
          BUTTON
        </button>
      </div>
    </div>
  );
}

Не уверен что помог, но по крайней мере это работает так как у Вас в примере. codesandbox

Ваш ответ

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

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