简单的react组件不会出现在UI上。

Question

我有一个简单的React组件，就像这个文件中的components/daw/index.js。它只应提供一个文本：

import React from 'react';

export default class Daw extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="daw-container" key="daw-container">
                <span>DAW placeholder</span>
            </div>
        );
    }
}

我通过另一个React组件来使用上面的组件。在文件components/media-viewer/VideoViewer/index.js中，我有：

export default class VideoViewer extends React.PureComponent {

  render() {
    return (
      <div>
          <Daw/>
      </div>
    );
  }

}

简单的文本DAW placeholder不会出现在UI上。我漏掉了什么明显的东西吗？是否错过了一些琐碎的东西？

​

class Daw extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="daw-container" key="daw-container">
                <span>DAW placeholder</span>
            </div>
        );
    }
}
class VideoViewer extends React.PureComponent {

  render() {
    return (
      <div>
          <Daw/>
      </div>
    );
  }

}

ReactDOM.render(<VideoViewer />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

​

Answer 1

@CertainPerformance提供的代码片段表明答案是否定的。没有任何小事会被错过。错误在代码中的其他地方。

​

class Daw extends React.PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="daw-container" key="daw-container">
                <span>DAW placeholder</span>
            </div>
        );
    }
}
class VideoViewer extends React.PureComponent {

  render() {
    return (
      <div>
          <Daw/>
      </div>
    );
  }

}

ReactDOM.render(<VideoViewer />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

​