Question

在React v15中，我可以轻松地执行以下操作：

<html>
    <head>
        <meta charset="UTF-8">
        <title>React v15</title>
    </head>

    <body>
        <div id="divContainer"></div>

        <script src="https://unpkg.com/react@15.6.2/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15.6.2/dist/react-dom.js"></script>

        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

        <script type="text/jsx">
            var HelloWorld = React.createClass({
                render: function() {
                    return <h2>Hello World !</h2>;
                }
            });


            ReactDOM.render(<HelloWorld />
                , document.getElementById('divContainer')
            )
        </script>
    </body>
</html>

一旦我引用react @ 16，react-dom @ 16就不再有效了，我知道React.createClass（）已被弃用并删除了。那它的替代品是什么？

我需要一种极简主义的方式来执行相同的 而不需要 构建过程，例如browserify，webpack，require，import等。我只想通过CDN或本地引用库，如我在示例中所示。

Answer 1

包含React 16库后，您可以直接访问React实例并扩展React.Component

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>React Hello World</title>
</head>

<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

  <script type="text/jsx">
    class MyApp extends React.Component {
      render() {
        return <span>Hello world</span>;
      }
    }
    ReactDOM.render(<MyApp />, document.getElementById('app'));
  </script>
</body>

</html>

如何在没有构建过程的情况下使用React v16

1 个答案: