Question

我已经使用CSS样式创建了一个选项卡菜单，并在ReactJS应用程序的多个不同位置使用了

。

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button:disabled {
    background-color: #ccc;
    cursor: default;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top:none;
}

这位于一个index.css文件中，该文件与我所有的.js文件放在同一位置。在我的React代码中，我使用它作为示例：

<table><tbody>
    <tr className="tab"><td>
        <button onClick={() => this.openTab(0)}>Tab 1</button>
        <button onClick={() => this.openTab(1)}>Tab 2</button>
    </td></tr>
</tbody></table>

我一直在考虑将其转换为一个名为TabView的React组件，该组件将渲染<tr>并在其中包含一些<button>并内联所有相同的样式。我会将信息作为道具（按钮文本和onClick处理程序等）传递给它。上面的代码段看起来像：

// after importing TabView from TabView.js
<table><tbody>
    <TabView data={someData}/>
</tbody></table>

问题是：从样式的角度来看，在ReactJS应用程序中，即使可以用CSS完全描述，将这种琐碎的事情实现为React组件，这是否是一个好的设计？

创建React组件与使用CSS样式

0 个答案: