反应.js - “不变冲突:元素类型无效:预期字符串”简单按钮

React.js - "Invariant Violation: Element type is invalid: expected a string" Simple Button

本文关键字：无效 字符串 按钮 简单 类型 元素 冲突 反应 不变冲突 js      更新时间：2023-09-26
import React from 'react';
class App extends React.Component {
  constructor(){
    super();
    this.update = this.update.bind(this)
    this.state = {val: 0}
  }
  update(){
    this.setState({val: this.state.val + 1});
  }
  componentWillMount() {
    console.log("Will mount");
  }
  render() {
    return (
      <button onClick={this.update}>
        {this.props.txt} - {this.state.val}
      </button>
    );
  }
  componentDidMount() {
    console.log("mounted");
  }
}
App.defaultProps = {txt: 'button'}

我正在尝试遵循有关 React 的教程，以创建一个具有"txt"值的简单按钮，该值每次单击时都会增加一个。一个单独的 main.js 像这样加载此文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));

该错误表明我的目标元素不是字符串，但"app"是字符串，所以我不确定为什么它没有呈现。有什么想法吗？这是我正在加载的索引.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lesson 11</title>
</head>
<body>
  <div id="app"></div>
  <script src="index.js"></script>
</body>
</html>

感谢您的任何帮助！

您需要从./App文件中导出App类组件

export default class App extends React.Component {

ES6 Modules

相关文章：