javascript - 我应该如何使用外部样式表来设置我的单一 react 组件的样式？

Question

假设我想制作一个侧边栏，并将其实现为一个组件(一个只在我的页面上出现一次的组件)。我将需要使用 #sidebar id 来设置我的侧边栏的样式，使其出现在侧面，以及其他样式(如字体等)。我应该这样实现吗:

<div id="sidebar">
    <SidebarContents/>
</div>

或者像这样:

<Sidebar/>
// ...
// in Sidebar.render:
render() {
    return (
        <div id="sidebar">
            // contents go here
        </div>
    );
}

Answer 1

如果你需要更灵活的id名称，你可以通过props添加id名称:

// reference in parent component
<Sidebar id="sidebar" />


// in definition
render() {
    return (
        <div id={ this.props.id }>
            // contents go here
        </div>
    );
}

我不会接受您的第一个想法(将组件嵌套在 div 中)，无需添加额外的元素:它不太清晰，并且可能不太容易操作和设置样式。

您的第二个想法(在组件最外层元素中添加 id)很好。如果这对您来说足够清晰和灵活，那就去吧。