Question

我添加了对HTML页面的反应。使用这种方法，如何在我的App类之上编写一个类并将其导入以便在Class中使用？

class Header extends React.Component

在我的App类之上，但我不断收到错误消息：

super expression must be null or a function

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
  <div id="root"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script type="text/babel">
    class App extends React.Component {
      componentDidMount() {}

      render() {
        return (
          <div className="">
          </div>
        );
      }
    }

    ReactDOM.render(
      <App/>,
      document.getElementById('root')
    );
  </script>
</body>
</html>

Answer 1

该类将只是另一个React组件，因此您可以按照任意方式呈现它：

class Header extends React.Component {
    render() {
        return (
            <h1>My Custom Header</h1>
        )
    }
}

class App extends React.Component {
    componentDidMount() {

    }

render() {
    return (
        <div className="">
            <Header/>
        </div>
    );
}
}
ReactDOM.render(
    <App />,
    document.getElementById('root')
);

也就是说，您可能只想在这种（无状态）情况下使用功能组件。

React：如何在HTML中使用React时导入另一个要使用的类

1 个答案: