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函数或类。

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

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

这样的事情应该起作用：

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

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

ReactJS组件类型无效

1 个答案: