0

我得到了以下组件


|-- 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>
    );
}

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

4

1 回答 1

1

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

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

在子组件（WidgetMenu & Editor 组件）中，您必须以这种方式应用它：

render() {
    return (
        <div className={this.props.className}>WidgetMenu {this.props.className}</div>
    );
}
于 2019-05-13T14:39:17.640 回答