Блог

Главная - Вопросы по программированию - Преобразование сложного контейнера div в компонент React

Преобразование сложного контейнера div в компонент React

#reactjs

#reactjs

Вопрос:

Я хочу преобразовать сложный контейнер div, созданный веб-дизайнером на чистом HTML, в компонент React. У этого контейнера div есть состояния, которыми React может управлять. Я знаю, что могу преобразовать div в JSX, но это означало бы двойную работу как для дизайнера, так и для меня. dangerouslySetInnerHTML не обрабатывает состояния. Идея в том, что я могу создать подкласс React.Компонент, определяет состояния и отображает значения состояния в контейнере div без использования JSX?

Вот фрагмент разметки контейнера div:

 <div id="activities_panel" class="panel">
    <div class="panel-body nav-tabs-animate nav-tabs-horizontal" data-plugin="tabs">
        <ul class="nav nav-tabs nav-tabs-line" role="tablist">
            <li class="nav-item" role="presentation">
                <a aria-controls="activities" class="active nav-link" data-toggle="tab" href="#activities" role="tab">Activities <span class="tag tag-pill tag-danger">5</span></a>
            </li>                    
        </ul>
        <div class="tab-content">
            <div class="tab-pane active animation-slide-left" id="activities" role="tabpanel">
                <ul class="list-group">
                    <li class="list-group-item">
                        <div class="media">
                            <div class="media-left">
                                <a class="avatar" href="javascript:void(0)"><img alt="..." class="img-fluid" src="avatar1.jpg"></a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">Avatar 1 <span>posted an updated</span></h4><small>active 14 minutes ago</small>
                                <div class="profile-brief">
                                    “Test test”
                                </div>
                            </div>
                        </div>
                    </li>                    
                </ul>
                <a class="btn btn-block btn-default profile-readMore" href="javascript:void(0)" role="button">Show more</a>
            </div>            
        </div>
    </div>
</div>

Ответ №1:

Несколько советов по преобразованию вашего большого div в компонент React:

  1. Я вижу, что вы можете создать по крайней мере три компонента: <activities-panel> как контейнер, <nav-tabs> и <tab-content> как дочерние компоненты. Конечно, вы можете создать больше компонентов подуровня, если хотите, что упрощает обслуживание.
  2. Измените все class на className
  3. Вы можете либо сохранить переменную состояния в контейнере и передать их через context API, либо просто использовать props . Таким образом, контейнер <activities-panel> будет управлять состоянием компонента.
  4. По возможности не используйте dangerouslySetInnerHTML .
  5. Используйте <button> для кнопок и <a> для ссылок, чтобы сделать его более доступным.

Комментарии:

1. итак, другими словами, я не могу избежать копирования разметки в мой компонент React.

2. Ну, из того, что я вижу, это не слишком сложно. На самом деле это не просто копирование и вставка, а следование способу сборки компонентов react.

3. Самым большим преимуществом компонента является его повторное использование и масштабируемость. Так что, может быть, подумайте об этом и поймете, почему вам действительно нужно использовать React и преобразовать его в компонент React.

4. Да, React был бы идеальным, потому что компонент должен обрабатывать несколько сложных состояний. Я определенно могу написать свою собственную логику обработки состояния, но я не хочу изобретать заново.

5. Это зависит от тебя, приятель, надеюсь, мои комментарии смогут тебе немного помочь. Удачи с вашим кодированием React.