Question

我有以下组件


|-- App
    |-- Components
        |-- WidgetMenu
        |-- Editor

我想将WidgetMenu组件放置在App中的3个位置，如下所示。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2fr 1fr;
  grid-template-areas: 
  "left center right"
  "bottom bottom bottom";
  
  height: 100vh;
}

.left {
  grid-area: left;
  background: green;
  color: white;
}

.right {
  grid-area: right;
  background: green;
  color: white;
}

.bottom {
  grid-area: bottom;
  background: green;
  color: white;
}

.center {
  grid-area: center;
}

.container > div {
  border: 2px solid black;
}

<div class="container ">
  <div class="left">WidgetMenu Left</div>
  <div class="right">WidgetMenu Right</div>
  <div class="bottom">WidgetMenu Bottom</div>
  <div class="center">Editor</div>
</div>

为此，我使用css类，如下所示。

render() {
    return (
        <div className="App">
            <WidgetMenu className="left" />
            <WidgetMenu className="right" />
            <WidgetMenu className="bottom" />
            <Editor className="center" />
        </div>
    );
}

但是我无法传递className，因为WidgetMenu没有请求这样的属性。那么应该怎么做呢？正确的方法是什么？我是否必须用div包装每个react组件并在它们上使用className？

Answer 1

如果您在父组件中执行此操作，

render() {
    return (
        <div className="App">
            <WidgetMenu className="left" />
            <WidgetMenu className="right" />
            <WidgetMenu className="bottom" />
            <Editor className="center" />
        </div>
    );
}

在子组件（WidgetMenu和编辑器组件）中，您必须通过以下方式应用它：

render() {
    return (
        <div className={this.props.className}>WidgetMenu {this.props.className}</div>
    );
}

使用CSS类将React组件放置在布局中

1 个答案: