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

Question

我想将网页设计师以纯 HTML 格式完成的复杂 div 容器转换为 React 组件。这个 div 容器有状态供 React 管理。我知道我可以将 div 转换为 JSX，但这意味着设计师和我自己的双重工作。 dangerouslySetInnerHTML 不处理状态。这个想法是我可以创建 React.Component 的子类，定义状态并将状态值渲染到 div 容器中而不使用 JSX？

这是 div 容器标记的 sn-p：

<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. 我可以看到您至少可以创建三个组件：<activities-panel> 作为容器，<nav-tabs> 和 <tab-content> 作为子级。当然，如果您愿意，您可以创建更多的子级组件，这使得维护更容易。
2. 将所有class 更改为className
3. 您可以将状态变量存储在容器中并通过上下文 API 将它们传递下来，或者直接使用 props。所以容器<activities-panel>会管理组件的状态。
4. 尽可能不要使用dangerouslySetInnerHTML。
5. 将<button> 用于按钮，将<a> 用于链接，以便更易于访问。