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中），不需要添加其他元素：它不太清晰，并且可能不太容易操作和样式。

你的第二个想法（在组件outter-most元素中添加id）很好。如果这对你来说足够清晰和灵活，那就去吧。

Answer 2

<SidebarContents/>是一个组件，应该在render（）中呈现然后，您的SideBar将包含<aside> html标记。在app.js中，在标题中呈现它，就像这样，它将显示在每个页面上。因为在标题之后的app.Js中，有你的路线。所以只需将您的组件放在app.js文件中，就像这样

import Sidebar from "./SideBarContentFile"; // ES6 Syntax
class App extends Component { 
render() {
return (
    <Router>
      <div className="App">
        <header>
             // place everything you want
        </header>
        <aside>
          <Sidebar/> // Sidebar is the component who contain the sideBar content
        </aside>
        // Here your route
        <main className="Content">
          <Route exact={true} path="/" component={Page_1} />
          <Route exact={true} path="/" component={Page_2} />
            ....
        </main>
      </div>
    </Router>
);
}}

Answer 3

只需将道具传递给SidebarContents的子div

<SidebarContents id="sidebar"/>

// in Sidebar.render:
render() {
    return (
        <div {...this.props}> // style, id, className, events, etc.
            // contents go here
        </div>
    );
}

我应该如何使用外部样式表设计我的单个反应组件？

3 个答案: