@zeng124

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

У меня есть django проект который связан с react js. Связь между django и react осуществляется так, что я создал приложение frontend там создан .baberlic , package-lock.js , package.json , webpack.config.js и другие
628a4088ea183271360267.png
в папке src есть файл index.js и папка components а в ней уже js код
628a4105d915b893449276.png
код в 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 и так по накатаной
  • Вопрос задан
  • 48 просмотров
Решения вопроса 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 будет истина то используем то приложение которое указана после
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@serhiops
Python/JavaScript/C++
Просто скрываешь элемент при помощи hidden при определенном условии:
<div id="app" {% if something %}  hidden {% endif %}></div>
<div id="product"></div>
<div id="saller"></div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы