javascript - React 中的在线示例(立方体的 CSS)

Question

我正在尝试在我使用 React 制作的网页中重现这个立方体(我对 React 很陌生，所以这个问题可能很愚蠢)

https://codepen.io/jordizle/pen/haIdo/

因此，我创建了一个组件，其中包含立方体的 HTML 结构。

class Cube extends Component {
  render() {
    return (
      <div className="cube">
        <div id="wrapper">
  <div class="viewport">
    <div class="cube">
      <div class="side">
        <div class="cube-image">1</div>
      </div>
      <div class="side">
        <div class="cube-image">2</div>
      </div>
      <div class="side">
        <div class="cube-image">3</div>
      </div>
      <div class="side">
        <div class="cube-image">4</div>
      </div>
      <div class="side">
        <div class="cube-image">5</div>
      </div>
      <div class="side">
        <div class="cube-image active">6</div>
      </div>
    </div>
  </div>
</div>
      </div>
    );
  }
}

然后，我只是将上述网站的 CSS 添加到我导入的单独文件中，如下所示:

import './ProductPage.css';

(请参阅上面的 CSS 链接。CSS 只是复制粘贴)。

最后，我创建了另一个组件，它应该在渲染立方体时渲染它:

class NewProductPage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      img: null,
    };
    this.onDrop = this.onDrop.bind(this);
  }
  onDrop(acceptedFiles){
    this.setState({
      img: acceptedFiles[0].preview,
    })
  }
  render(){
    return (
      <div>
        <Cube />
        <div className="DropPicBox">
          <DropZone onDrop={this.onDrop}>
            {this.state.img ? 
              <div>
                <img className="PicBox" src={this.state.img} />
              </div> 
              : null}
          </DropZone>
        </div>
        </div>
    );
  }
}

这是呈现的，但不正确:

我的问题是:react 应用 CSS 的方式是否会改变立方体的外观？我使用 jfiddle 使用来自该网站的 HTML 和 CSS 对同一个立方体进行建模:https://codepen.io/jordizle/pen/haIdo/

立方体看起来正确:

https://jsfiddle.net/jfj3muug/#&togetherjs=q2dv8HIMza

Answer 1

在 JSX 中，要指定元素的类，您必须使用 className，而不是 class。例如:

<div className="foo">...</div>

代替

<div class="foo">...</div>

您在一些地方这样做，但是Cube(您的第一个代码块)在几个地方有class。