将复杂div容器转换为React组件

Question

我想将web设计师用纯HTML编写的复杂div容器转换为React组件。此div容器具有React to manage的状态。我知道我可以将div转换为JSX，但这意味着设计师和我都要加倍努力。危险的是，Html不处理状态。我可以创建React的子类。组件，定义状态并在不使用JSX的情况下将状态值呈现到div容器中？

下面是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>

Answer 1

将大div转换为React组件的一些技巧：

1. 我可以看到您至少可以创建三个组件：