ReactJS 无效的组件类型

Question

查看 ReactJS 文档中的 "Choosing the Type at Runtime" section，看起来以下代码应该有效：

class App extends Component {
  constructor() {
    super();

    this.state = { test: <div>Test</div>};
  }

  render() {
    const Test = this.state.test;

    return <Test />;
  }
}

但是，没有呈现任何内容，并且在控制台中我看到以下错误：

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

我不明白为什么这不起作用；请解释。

请注意，上面的测试应用是使用 create-react-app 创建的。

Answer 1

这将创建一个元素 - 要呈现到屏幕的 DOM 节点的特定实例。

this.state = { test: <div>Test</div>};

这会获取该元素并尝试将其视为一个组件 - 一个 React 函数或 class 知道如何将自身呈现为一个元素。

const Test = this.state.test;
return <Test />;

使用传统 OO 的类比，这类似于采用 class 实例并尝试将其用作 class.

像这样的东西应该可以代替：

this.state = { test: <div>Test</div>};
// ...
return this.state.test;

有关详细信息，请参阅 "React Components, Elements, and Instances."

ReactJS 无效的组件类型

ReactJS invalid component type

reactjs

react-jsx