Как мне правильно интегрировать react js в django без растравления приоритетов между компонентами?

Question

[zeng124]

У меня есть django проект который связан с react js. Связь между django и react осуществляется так, что я создал приложение frontend там создан .baberlic , package-lock.js , package.json , webpack.config.js и другие

в папке src есть файл index.js и папка components а в ней уже js код

код в index js выглядит так

import App from "./components/App"
import Product from './components/Product'
import Saller from './components/Saller'

Главными файлами являются App.js , Product.js , Saller.js
Все эти файлы подключаются к html файлу с помощью такого кода

const container = document.getElementById("<id_name>");
render(<"File_name" />, container);

Все хорошо, НО я не могу взять и подключиться по айдишнику, например к saller, без подключения к app и product
То есть что бы все корректно отображалось мне нужно вписать такой код в html

<div id="app"></div>
<div id="product"></div>
<div id="saller"></div>

Но в этом случае подключает и приложение app и приложение product. Как мне реализовать подключение только приложения salle без участия app и product
P.S. index js расставляет приоритеты и app работает одна, а product работает только при подключении app, а saller работает при подключении product + app и так по накатаной

Answer 1

[zeng124]

Я смог решить это! Если кто то вдруг столкнулся с такой же проблемой как у меня то вот ее решение

const container = document.getElementById("<id_name>");
render(<"File_name" />, container);

этот код я полностью убрал из всех файлов, а index.js выглядит так

import React from 'react'
import ReactDOM from 'react-dom'
import Product from './components/Product'
import Saller from './components/Saller'
import App from './components/App'

const url = document.URL.split('/')[3].split('?')[0]
if (url == "search") {
  ReactDOM.render(
    <App />,
    document.getElementById('app')
  )
  
} else if (url == "card") {
  ReactDOM.render(
    <Product />,
    document.getElementById('product')
  )
} else if (url == "saller") {
  ReactDOM.render(
    <Saller />,
    document.getElementById('saller')
  )
}

В переменой url идет проверка самого url и если этот url нужно использовать с приложение указываем его
Например есть ссылка https://pypa:8000/lypa/main/38
И мы забираем кусочек этой ссылки lypa/main
И дальше проверяем его, если же в if else if будет истина то используем то приложение которое указана после

Answer 2

[serhiops]

Просто скрываешь элемент при помощи hidden при определенном условии:

<div id="app" {% if something %}  hidden {% endif %}></div>
<div id="product"></div>
<div id="saller"></div>

Comments

[zeng124]

Это может мне помочь, но если компонентов будет 20? Код будет выглядить не в лучшем состоянии