Использование React с Django для визуализации звезд на странице

Я разрабатываю сайт манги, который имеет звездный рейтинг для каждой манги. Я использую React (в котором я очень и очень новичок) с Django. Я создаю div с классом stars с id, который соответствует количеству звезд у этой манги. После этого соответствующее количество звезд должно быть выведено на веб-страницу с помощью кода react.

{% block script %}
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
{% endblock %}
{% for manga, rating in mangas %}
<script type="text/babel">
    function Apicall(props) {
            console.log((props.value))
           return Render_rating(props.value)
        };
       
       
       function Render_rating(props) {
           for (var i = 0; i = parseInt(Math.round(props)); i++) {
           return Render_stars()
       } 
       }
       function Render_stars() {
           return (
           <img src="static/mangas/fullstar.png"/>
           )
       }
       console.log(document.querySelector(".stars").id)
       ReactDOM.render(<Apicall value={document.querySelector(".stars").id} />, document.getElementById('app'))
     </script>
<div id="manga">
<a href="{% url 'manga' manga.id %}">
<div class="stars" id="{{ rating }}"></div>
<div id="app"></div>
<h1>{{ manga.title }}</h1>
<img src="{{ manga.image.url }}">
<br/>{% for genre in manga.genre.all %}{{ genre }}<br/>{% endfor %}
{{ manga.Description }}
</a>
</div>
{% endfor %}

Я понимаю, что есть много проблем с моим react кодом. document.querySelector(".stars").id всегда выдает число 0. Также я хочу узнать о более элегантном способе структурирования react кода с помощью Django. Я очень новичок в этом, поэтому...

Вернуться на верх