Question

在以下代码中，如果default中的select案例运行，我会收到警告：

import React, { Component, propTypes } from 'react';
import Bar from './Bar/Bar';
import Baz from './Baz/Baz';

export default class Foo extends Component {
  static propTypes = {
    mode: PropTypes.string.isRequired,
    basePath: PropTypes.string.isRequired,
  };

  render() {
    let Response;
    switch (this.props.mode) {
      case 'init':
        Response = Bar;
        break;
      case 'edit':
        Response = Baz;
        break;
      default:
        Response = <div></div>;
    }

    return (
      <div>
        <Response basePath={this.props.basePath} />
      </div>
    );
  }
}

警告：

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Foo`.

我应该如何在这里创建一个空的div？

Answer 1

更改它以便Response是一个函数：

default:
  Response = () => <div></div>

React需要一个组件，而不是一个元素（即组件实例）。响应将是一个功能无状态组件，您的警告应该消失。

渲染内联jsx而不是导入的类时发生反应警告

1 个答案: