Question

我想将一个由Web设计人员完成的复杂div容器以纯HTML格式转换为React组件。该div容器具有供React管理的状态。我知道我可以将div转换为JSX，但这对于设计人员和我自己都意味着双重工作。 evillySetInnerHTML不处理状态。我的想法是我可以创建React.Component的子类，定义状态并将状态值呈现到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>

Answer 1

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

我可以看到您至少可以创建三个组件：<activities-panel>作为容器，<nav-tabs>和<tab-content>作为子组件。当然，如果愿意，您可以创建更多的子级组件，这使维护更加容易。
将所有class更改为className
您可以将状态变量存储在容器中并通过上下文API传递给它们，也可以只使用props。因此，容器<activities-panel>将管理组件的状态。
如果可能，请勿使用dangerouslySetInnerHTML。
将<button>用于按钮，将<a>用于链接，以使其更易于访问。

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

1 个答案: